๐ Can't overwrite `paddingX` with `paddingLeft` or `paddingRight`
Opened this issue ยท 0 comments
tjosepo commented
Describe the bug
When the paddingX
styleprop is used, it becomes impossible to overwrite the padding with paddingLeft
or paddingRight
.
This can be a pitfall when creating custom components that can use prop spreading to get styles from a parent.
Steps to reproduce
function MyCustomComponent(props: DivProps) {
return (
<Div paddingX="20px" {...props}>
Hello there!
</Div>
);
}
function App() {
return <MyCustomComponent paddingLeft="50px" />; // โ ๏ธ This padding will NOT be applied! It will stay 20px.
}
Expected results
Because paddingLeft
is more specific than paddingX
, I expect it to take precedence over the paddingX
rule.