[Skeleton] Not rendered when Strict CSP is applied in Next.js

[kuanjiahong]

Steps to reproduce

Steps:

1. Open this link (https://codesandbox.io/p/github/kuanjiahong/mui-skeleton-not-rendered/main) to live example: (required).
2. Open this link to view the preview by CodeSandbox (https://n4fhch-3000.csb.app/)
3. Open this link to see the application when deployed to Vercel (https://mui-skeleton-not-rendered.vercel.app/)

Current behavior

Only one Skeleton component is shown on screen

Expected behavior

Two Skeleton components should be shown on screen

Context

I want to show loading skeleton for sidebar and header. However, when strict csp is applied, only one skeleton is shown. The configuration for strict csp is based on this link (https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy)

However, there is a workaround to this issue which is to use unsafe-inline in style-src and not nonce-${nonce}. But this might not be best case since it might introduce to some security vulnerabilities to the application.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.0.0 - C:\Program Files\nodejs\npm.CMD   
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (132.0.2957.115)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.0 => 11.14.0
    @mui/core-downloads-tracker:  6.4.8
    @mui/material: ^6.4.8 => 6.4.8
    @mui/material-nextjs: ^6.4.3 => 6.4.3
    @mui/private-theming:  6.4.8
    @mui/styled-engine:  6.4.8
    @mui/system:  6.4.8
    @mui/types:  7.2.24
    @mui/utils:  6.4.8
    @types/react: ^19 => 19.0.12
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ^5 => 5.8.2

Search keywords: nextjs, strict-csp, content-security-policy, css, unsafe-inline, nonce, skeleton

[aarongarciah]

@kuanjiahong using the sx prop removes the need for inline style. Instead of passing width and height as props, pass them in the sx prop.

<Skeleton
  sx={{
    display: { xs: "none", md: "block" },
+   width: 210,
+   height: "100vh"
  }}
  variant="rectangular"
- width={210}
- height="100vh"
/>

PS: there's a bug in the code: display: auto is not valid.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.