Styles for marketplace components: theme not applied

UI Builder
1

We have installed the UI component “simple modal” from the marketplace, and we can modify styles for it using a Theme extension. However, when we move the LESS code from the extension into our main Theme Library, the style changes are not applied to the component — only if such changes are specified in an extension does it work.

So, here’s the question: the marketplace component is found as a directory in our “custom components” directory for the container where we installed the component. This custom component directory contains a “styles” folder with a .less file for the component. Am I correct in understanding that styles defined here over-ride what we have in our main Theme Library? But that Theme Extensions over-ride what is in the style file for the custom component?

Sub-question: is it a bad idea to “hack” things directly in the file system where the marketplace component is placed? Like editing the index.less file directly? Related question: is it a bad idea to edit the actual js files for the component to modify it a little? It looks like we would be able to do this, but perhaps there are some bad “side effects” I’m not aware of…

2

Hello @Alex_Klein

As for the first question: This question is related to CSS and how it works, all “overriding” things come from selector weight. That means I couldn’t answer which styles override another style and why. That all depend on the specificity of selectors in styles that were written for a specific component.

In general, we have an order for how final styles will appear in your app, and that is how it looks:
Extension → Custom Component → Theme.

But you should understand this order is essential only if you ignore the selector’s weight.

As for sub-question:

If you are confident in what you do - you could try. It’s more safe for less and not quite for js. But I must warn you if something will be broken(especially in JS files) - there will be a chance to lose your logic. Also, getting our support with “custom” files and reproducing your issues too will be harder, and could be impossible.

Let me know, if something still unclear.

Regards, Dima.

3

Hi Dima, it all makes perfect sense (especially the Extension → Custom Component → Theme hierarchy). Thanks :pray: