Not sure how this could be solved, but I often find myself in a situation where I have a condition in a Conditional Style on a parent element, that needs to be duplicated on a child. Here’s a typical example. I have a a container with a text child component. Let’s say this element has a active/inactive state and white background-color with dark text when inactive, and dark background with white text when active:
As color is not a valid style property on container components, I will need to duplicate the conditional style to the text component to set the inverted color in this case.
If possible, it would be desireable to only specify this condition once.
There are possible ways to achieve this behavior without duplicating conditional styles:
If “Text Color” doesn’t have any specified default colors, it will default to having a white color on a dark background, or a black color on a light background.
It is also possible to have a conditional style on the property “Color” on the parent container. This will control the color of the Text component underneath, if the text inherits color from its parent, which is default behavior. “Color” can be found in conditional styles for a container, under the “Background” category.
Could you share what it looks like for you for a conditional style on a Container? For me, Color is available as a conditional style, as seen in the image. This property controls the color for all child components who inherit their color from the parent. You can read more in our Docs
