Learn how to use MUI System with custom components.
Normally you would use the
Box component at the root of your component tree in order to work with the
If you want to use
sx with fully custom (non-MUI) components, you can do so with the
This gives you all the same capabilities, and with a smaller bundle size.
The following demo shows how to implement this utility:
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: