Skip to main content
Solved

Nested components not overriding properties

  • April 21, 2022
  • 1 reply
  • 1318 views
Federico_Romano

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?

image

You can check the file here: Figma

Thanks!

Best answer by Federico_Romano

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!

View original
This topic has been closed for comments

1 reply

Federico_Romano

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!

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings