From 99da7e362a6dee0700e5fb6ddcea7139c1c82bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= Date: Tue, 14 May 2024 20:55:03 +0200 Subject: [PATCH] Add CSP callout --- docs/data/system/getting-started/the-sx-prop/the-sx-prop.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md index 311188f80a1491..b6287cd018f2bc 100644 --- a/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md +++ b/docs/data/system/getting-started/the-sx-prop/the-sx-prop.md @@ -296,6 +296,10 @@ If you want to receive the `sx` prop from a custom component and pass it down to 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. +:::info +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. +::: + {{"demo": "DynamicValues.js", "bg": true}} ## TypeScript usage