I have a situation where I am using a button component that is styled based on a theme provided by a context:
The code in Button.js looks like:
() => {
const theme = useContext(themeContext); // { primaryColor: "blue" }
return <button className="MyButton" styles={{ backgroundColor: theme.primaryColor }}>Hello</button>
}
And the styling for the button is defined in Button.styles.scss as follows:
.MyButton {
background-color: purple
transition: background-color 0.1s
&:hover {
background-color: green
}
}
The issue arises when the background color of the button is set dynamically by React, causing the transition effect to not work properly. My question is whether there is a way to achieve the desired transition effect without having to rewrite all the styling in JSS (as the rest of the application's styling is done in SCSS).