Skip to content
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
One sentence per line
  • Loading branch information
aarongarciah committed May 29, 2024
commit 60fed268ae43f9af842219ffb27f91bcf335954f
9 changes: 6 additions & 3 deletions docs/data/system/getting-started/the-sx-prop/the-sx-prop.md
Original file line number Diff line number Diff line change
Expand Up @@ -288,16 +288,19 @@ Each index can be an object or a callback.

## Passing the sx prop

If you want to receive the `sx` prop from a custom component and pass it down to another MUI System, we recommend this approach:
If you want to receive the `sx` prop from a custom component and pass it down to another MUI System, we recommend this approach:\*\*\*\*

{{"demo": "PassingSxProp.js", "bg": true, "defaultCodeOpen": true}}

## Dynamic values

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.
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.
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}}
Expand Down