I have a problem I can’t seem to be able to solve.
Let’s say I have a button component, with two states (variants): normal and hover. The button has text and also an icon and the icon is also a component, so that you can swap the instance depending on your needs in order to change the icon according to the context. The icon has a certain color in the NORMAL button variant and another color in the HOVER variant.
The problem is, if I create an instance of the button and I want to change the icon to another one (swap instance), the color of the new icon will replace the color of the default button icon, which totally makes sense. But if I wanna customize the color of the new icon in the newly customized button, I simply can’t do for both NORMAL and HOVER states, if I change the icon color in the NORMAL state, that’s going to affect the HOVER state as well. The problem is that I want the NORMAL state icon to have a color, the HOVER state icon to have a different color.
What do you guys do in this situation?
Thank you kindly,