Browser: Chrome
OS: Windows
I am creating a page with about 9 items of the same component. The rich text element in each component should get its own typography color. Here’s what I did:
- I created a property for global class and linked it to the rich text element.
- I then created 9 global classes, using another rich text element on the page, setting a different typography color for each class. After I was done, I deleted that rich text element.
- Finally, I selected the correct global class in each component.
All looks good in the backend. On the frontend, only the final component is loading the color. No errors in the console. The code inspector shows that the correct class has been added to each, but the colors are not being loaded.
It seems like the frontend only loads global classes that are being used in elements outside of components (except for the final component, which is loading for some reason). This probably has to do with this topic:
It makes sense in that case, but when it is added to a component, it should be treated like it has been added to an element on the page?
As a workaround, I have added another rich text element to the page, added all the global classes to it, and then set it to display: none. Now all components are showing the correct colors on the frontend as well.
