This repository was archived by the owner on Aug 19, 2022. It is now read-only.
This repository was archived by the owner on Aug 19, 2022. It is now read-only.
Decompose shorthand/compound styles to their constituent parts #95
Description
I have some buttons in a nav with a default padding value:
var style = {
padding: '10px 20px'
}
When selected, I add a thin left border + adjust only the left padding accordingly:
modifiers: [
{
selected: {
borderLeft: '3px solid blue',
paddingLeft: 17
}
}
]
Unfortunately, when the item becomes unselected, Radium is using 0 for the paddingLeft value instead of the original 20px value. I’m assuming this is because I don’t have paddingLeft as a property in the default styles:
I was able to fix this by changing paddingLeft to padding + using a more explicit string value:
modifiers: [
{
selected: {
borderLeft: '3px solid blue',
padding: '10px 20px 10px 17px'
}
}
]
My gut tells me Radium should be able to intelligently merge related properties like padding + paddingLeft, margin + marginTop, etc. on modifier changes.
- Is this the expected behavior?
- Is it recommended to be explicit with value changes like these?