This is the first time I’m running into this issue and I think it has something to do with the fact that I have an Instance Swap property applied to the nested component. I’ve done this with “normal” nested components without an instance swap property with no issues.

Here’s the problem: I have a main component called “banner” with 6 variants (3 color variations, with desktop and mobile sizes). The text is a nested component called “.bannerContent”, which also has 6 variants (3 color variations, with desktop and mobile sizes).

For the 3 color variations, the background colors are set up with variables, and the variations are Primary, Secondary, and Tertiary. And same with the .bannerContent component - the text has 3 color options: Primary, Secondary, Tertiary.

I have no problem changing the background color for each banner variant, however once I pick a .bannerContent variant, it applies that to ALL banner variants. So for example, I have the .bannerContent variant selected with the “Primary” text color property applied. But if I click on the second banner variant to change the text color property to “Secondary” - it then switches ALL instances of that nested component to the secondary version.

I also have this same issue if I try to select the mobile variant of the text, to apply it to the mobile banner variants. Once I change it to mobile for one variant, it changes it across the board.

Side Note: Like I said, I have variables set up to control all the colors for the banner background and the bannerContent text color - but right now they all look the same because I don’t have those different hex colors applied yet. I’m just trying to get this part to work first.