005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
23 lines
977 B
Markdown
23 lines
977 B
Markdown
# Custom components
|
||
|
||
<p class="description">Learn how to use MUI System with custom components.</p>
|
||
|
||
## Using sx with custom components
|
||
|
||
Normally you would use the [`Box`](/system/react-box/) component at the root of your component tree in order to work with [the `sx` prop](/system/getting-started/the-sx-prop/).
|
||
If you want to use `sx` with fully custom (non-MUI) components, you can do so with the `unstable_styleFunctionSx` utility.
|
||
This gives you all the same capabilities, and with a smaller bundle size.
|
||
|
||
The following demo shows how to implement this utility:
|
||
|
||
{{"demo": "StyleFunctionSxDemo.js"}}
|
||
|
||
## Using standalone system utilities
|
||
|
||
If you only need specific style functions from the `sx` prop, you can import them individually rather than pulling in the entire package.
|
||
This is useful if you need to optimize for the smallest bundle size possible.
|
||
|
||
The demo below illustrates how this works:
|
||
|
||
{{"demo": "CombiningStyleFunctionsDemo.js", "defaultCodeOpen": true}}
|