Skip to content

Commit 6c061ad

Browse files
committed
Add CSP callout
1 parent dffa7a3 commit 6c061ad

File tree

1 file changed

+4
-0
lines changed

1 file changed

+4
-0
lines changed

docs/data/system/getting-started/the-sx-prop/the-sx-prop.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -296,6 +296,10 @@ If you want to receive the `sx` prop from a custom component and pass it down to
296296

297297
For highly dynamic CSS values, we recommend using inline CSS variables instead of passing an object with varying values to the `sx` prop on each render. This approach avoids inserting unnecessary `style` tags into the DOM, preventing potential performance issues when dealing with CSS properties that can hold a wide range of values that change frequently. For example, a color picker with live preview.
298298

299+
:::info
300+
If you're having problems with your CSP policy while using inline styles with the `style` attribute, make sure you've enabled the [`style-src-attr`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src-attr) directive. Check [our guide](/material-ui/guides/content-security-policy/) on how to configure CSP.
301+
:::
302+
299303
{{"demo": "DynamicValues.js", "bg": true}}
300304

301305
## TypeScript usage

0 commit comments

Comments
 (0)