search

bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

Custom class order #462

Closed jackerman88 closed 2 years ago

jackerman88 commented 2 years ago

When setting a custom class on a bootstrap component, it gets added before the bootstrap classes, so the bootstrap classes override it.

Any custom classes should be last in the list to ensure they override the bootstrap classes already set by the sveltestrap components. This will prevent the default bootstrap class's css from overriding the styles set in the custom class.

As a workaround, you can manually set styles on the component with a style="" attribute, but for more than one or two styles, that gets pretty unwieldy.

PotatoesMaster commented 2 years ago

Hi. When referring to a list, I presume you are talking about the value of the class attribute on the HTML tag (correct me if I'm wrong).

The style getting applied is impacted by the declaration order of the CSS rules (and their specificity), not by the order in the class attribute : https://web.dev/learn/css/specificity/#a-matching-specificity-score-sees-the-newest-instance-win.

Have you included Bootstrap CSS file before your custom styles ?

jackerman88 commented 2 years ago

Ah, the issue is that sveltestrap components (or at least the Spinner component I was working on) doesn't have a "class" prop, so my styles weren't applying because the class didn't actually exist on the component.