Nested components not overriding properties

I have a button component made of 3 components, each inside of the other

  • The 1st one is just the contents (icons and text)
  • The 2nd one contains the 1st one plus the background with statuses (active, disabled, etc.), this one overrides colors for the 1st one
  • The 3rd one includes the 2nd one, with height variations

Whenever i insert an instance of the button and change some variations, they dont take the color overrides i set in the 2nd one, why does this happen?

You can check the file here: Figma

Thanks!

So this reply solved the issue for me:

Basically: If you want to have things preserved in states other than the initial state, they have to exist in the initial state

So you dont really need to do anything too complicated like defining a .base whatever component, the only thing that needs to happen is that all the components need to exist in all the states, so dont delete them, just hide them!