Solara•4mo ago

Style order

I'm having some difficulty sorting through the order of CSS loading. I'm using the Style "component" to load css files from my assets folder. They load no problem and show up in the expected order in the <head> section. However, they are overridden by 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 allows me to use SCSS, but again, I'm sure on the exact mechanics that make this happen. Thanks 🙂

3 Replies

EdanOP•4mo ago

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

MaartenBreddels•4mo ago

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

Monty Python•4mo ago

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 margin-bottom: ... !important property. I see that Card prepends ma-{margin} to the class order. On inspection, I see that ma-0 is applied as .v-application .ma-0, which applies a margin: # !important property. Two things: - Does v-application overrides precedence somehow? There are several v-application nested classes throughout. I take it this is vuetify? Is their higher precedence by design? - The issue really is the !important flag on the ma class. It effectively blocks any user styles. Can this be modified?

with Card(
    margin=0,
    classes=["container node-card"],
):
    ...

with Card(
    margin=0,
    classes=["container node-card"],
):
    ...

Created

Gaming

Programming

Style order