If you have two instances of the same component and try to edit one it will change the other. To stop this from taking place, we can separate the two by creating a component variant.

Select the component and click on the component tab, here you can add a variant.

Select the Properties tab and we will now see that a variant property has been added.

Now we can add our second component and set that variant to true to edit it and not affect the base component.

When we select the box component inside of the parent component it will show us a small tree that has the parent component name and the variant that we are affecting and the box that we are styling.

Example of changing the background of the snakes variant without affecting the base variant.

If you happen to try to work on a component without the properly selected variant you will get a warning icon letting you know that are making changes to a component you will not be able to see.

In this case, you need to either:

  • Turn on the variant in the properties tab
  • or switch the variant tab next to the component