Responsive values is variant styles override sx styles
See original GitHub issueResponsive values in variant styles override sx
styles.
To Reproduce
// theme.ts
variants: {
buttons: {
primary: {
paddingX: ['24px', '32px'],
paddingY: ['8px', '12px'],
}
}
}
// component.styles.ts
// twitter button is a primary button
twitterButton: {
variant: 'button.primary',
px: '5px',
py: '5px'
}
// final style: => {px: '24px', py: '8px'}
// expected: { px: '5px', py: '5px'}
twitterButton: {
variant: 'button.primary',
px: ['5px'],
py: ['5px'],
}
// final style: => {px: '24px', py: '8px'}
// expected: { px: '5px', py: '5px'}
twitterButton: {
variant: 'button.primary',
px: ['5px', '5px', '5px'],
py: ['5px', '5px', '5px'],
}
// final style: => {px: '5px', py: '5px'}
// as expected
Expected behavior
sx
prop styles should always override variant styles.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 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 >The sx prop - MUI System
The sx prop is a shortcut for defining custom styles that has access to the theme. The sx prop lets you work with...
Read more >The Ultimate Guide to the MUI 'sx' Prop - Smart Devpreneur
Easy responsive styling – properties in sx can accept an object of with ... Below are some of the values in the 'filled'...
Read more >Overriding styles with the sx prop | Primer React
Responsive values Just like values passed to system props, values in the sx prop can be provided as arrays to provide responsive...
Read more >Material UI in React #3 — Styles — adding global theme and ...
sx — the system prop that allows defining system overrides as well as additional CSS styles. It expects multiple values, it has no...
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
Yeah, it’s the same issue. Thanks for a better explanation @lachlanjc
@lachlanjc if that’s the same thing happening in the issue description, then yeah, that’s a known issue without a clear solution, but I suspect the example above might be pointing to something else??