๐ Object passed to `style` prop gets mutated, which can lead to inconsistencies
Opened this issue ยท 0 comments
tjosepo commented
Describe the bug
Because Orbit styleprops don't support all CSS properties, we sometimes have to pass an object to the styles
property.
<Div styles={{ transition: "all 0.3s linear" }} />
It might be desireable to store the style object in a variable, to be able to reuse the styles across components:
const styles = { transition: "all 0.3s linear" }
return (
<>
<Div styles={styles} />
<Div styles={styles} />
</>
);
However, doing so might lead to hard-to-understand bugs, as the object that is passed to the style
prop seems to be directly mutated by Orbit, which makes sharing the object potentially dangerous:
const styles = { transition: "all 0.3s linear" }
return (
<>
<Div backgroundColor="red" styles={styles} />
<Div styles={styles} /> // โ ๏ธ This will have a red background color!!
</>
);
Steps to reproduce
See above.
Expected results
Orbit should not mutate objects passed as props directly, as those might be shared between components.