Solara•17mo ago

Style order

I'm having some difficulty sorting through the order of CSS loading. I'm using the

Style

Style

"component" to load css files from my assets folder. They load no problem and show up in the expected order in the

<head>

<head>

section. However, they are overridden by

vuetify

vuetify

classes, which I presume are somehow loaded after. But I can't see where this is happening. Post-serve JS? Could you please assist. Also, great if you have some advice regarding handling CSS, and maybe SCSS, which I am currently using locally. When I work in React, installing

sass

sass

allows me to use SCSS, but again, I'm sure on the exact mechanics that make this happen. Thanks

EdanOP•8/16/24, 1:50 PM

Okay, I see. It's my use of the component, which prepends an class to my classes. So my own margins are bypassed. Hmm, I think I'll open an issue.

MaartenBreddels•8/20/24, 7:58 AM

Backlink to issue and the solution: https://github.com/widgetti/solara/issues/737

Monty Python•8/20/24, 7:58 AM

edan-bainglass

<:issue_closed_completed:979047130847117343> [widgetti/solara] `Card` component's `ma-{margin}` class takes precedence to `classes`

The view below does not seem to respect my CSS class, at least not my property.

I see that prepends to the class order. On inspection, I see that is applied as , which applies a property.

Two things:

Does overrides precedence somehow? There are several nested classes throughout. I take it this is
```
vuetify
```
```
vuetify
```
? Is their higher precedence by design?
The issue really is the flag on the class. It effectively blocks any user styles. Can this be modified?

Created

•

8/16/24, 2:22 PM