Understanding how the sx prop works, sx prop object composition, etc
See original GitHub issueI think understand the jsx pragma but have a couple questions about sx
.
1: The pragma does not seem to be necessary for theme-ui components such as <Box />
, but is is for the native/intrinsic html elements such as <div />
s. Is this correct?
2: Perhaps ill-advised, I wanted to create a custom component that would have its own internal styles that could be overridden, essentially ({ sx = {}, ...props }) => <Text sx={ ...rootStyles, ...sx } ...props />
. This did not work when using the jsx pragma, which leads me to think babel is actually wiping away my non-standard sx prop - I can even log it and see that it is always {}
. Is this assumption correct? I can probably just work around it using variants and plain text in any case, but wondering.
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
The `sx` Prop - Theme UI
The sx prop lets you add any valid CSS to an element, while using values from your theme to keep styles consistent. You...
Read more >MUI V5: The SX Prop - YouTube
In this video I go over React Material UI's new SX prop that comes built into every MUI V5 component. We go over...
Read more >The Ultimate Guide to the MUI 'sx' Prop - Smart Devpreneur
The Purpose of the SX Prop The docs explain it simply: The `sx` prop is a shortcut for defining custom style that has...
Read more >A cleaner way to compose the sx prop (Material UI v5)
Material UI v5 recently released their new design system the Sx prop. The property includes style properties from CSS and @mui/system.
Read more >What is the purpose of sx prop in Material UI? - Stack Overflow
Properties in sx object can have functions as valuse. These functions have access to theme too. <Box sx={{ height: (theme) => ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Correct, though there’s no reason not to use it as you’ll probably be mixing them with your own components or elements.
All you need to do is ensure that the
className
prop is passed through to the child element.Thanks! Closing as my immediate issue is resolved.