Can not override default styles - CSS class multiplication

[tbydza]

Hello,
I want to use this component, but I have problem overriding default styles. After some dubbuging and reading this discussion about style preprocessing I've found that prefix css class generated by svelte for style scoping gets multiplied in resulting css (from :where(div.multiselect) to this .svelte-19kmkoq.svelte-19kmkoq.svelte-19kmkoq.svelte-19kmkoq:where(div.multiselect). Due to the high specificity of this selector it is hard to override it with my custom class.

I am not sure, but I think it has to do with scss preprocessing. Can you fix this or provide some workaround?

currently generated CSS:

.svelte-19kmkoq.svelte-19kmkoq.svelte-19kmkoq.svelte-19kmkoq:where(div.multiselect) {
    position: relative;
    align-items: center;
    display: flex;
    cursor: text;
    border: var(--sms-border, 1pt solid lightgray);
    border-radius: var(--sms-border-radius, 3pt);
    background: var(--sms-bg);
    max-width: var(--sms-max-width);
    padding: var(--sms-padding, 0 3pt);
    color: var(--sms-text-color);
    font-size: var(--sms-font-size, inherit);
    min-height: var(--sms-min-height, 19pt);
    margin: var(--sms-margin);
}

CSS generated in v6:

.svelte-18t61g:where(div.multiselect) {
    position: relative;
    align-items: center;
    display: flex;
    cursor: text;
    border: var(--sms-border, 1pt solid lightgray);
    border-radius: var(--sms-border-radius, 3pt);
    background: var(--sms-bg);
    max-width: var(--sms-max-width);
    padding: var(--sms-padding, 0 3pt);
    color: var(--sms-text-color);
    font-size: var(--sms-font-size, inherit);
    min-height: var(--sms-min-height, 19pt);
    margin: var(--sms-margin);
}

[janosh]

Thanks for letting me know. Having default easily overridable component styles has been quite the pain tbh. Might have to revert #126. Will do a bit of searching for alternatives first.

[janosh]

Btw, there's an related issue about this on the Svelte repo: sveltejs/svelte#4374

[B3Kay]

Im unable to overwrite the default css with Tailwind aswell.

This is the generated HTML.

<ul class="options bg-slate-800 svelte-1momp8n"><li class="svelte-1momp8n" aria-selected="false">JavaScript </li></ul>

In my sveltekit app I add this.
And I'm trying to override the classes style with tailwind but the svelte-1momp8n will always be last.

<MultiSelect
	outerDivClass="input rounded-md"
	ulOptionsClass="bg-slate-800"
>
	<TypeSlot let:option {option} slot="selected" />
</MultiSelect>

"svelte-multiselect": "^8.2.0"

[janosh]

@B3Kay Sadly, there's nothing I can do to change the order of the classes. Svelte applies its component scoping styles last and there's no way to apply additional classes after that afaik (except by doing it through JS at run time which would cause flashing styles and be a can of worms).

I'm not a Tailwind user myself but I had assumed it would work the same way as applying any other classes that are defined by global CSS. That does work as you can see in this example:

https://multiselect.janosh.dev/css-classes#external-css-classes

[tbydza]

@B3Kay If I remember correctly, using bootstrap classes to override deafult styles did not work for me as well.
For some reason the external css class (bootstrap, tailwind) selector has lower specificity then default css selector.
That is probably caused by svelte adding its svelte- class. But that is more of a svelte issue I think.
From my experience, selector specificity when using single class is: external css < default css <= your own css (inside svelte component). This wasn't issue for me, because I needed to change bootstrap visuals anyway. So I ended up using my custom css classes created with custom rules and bootstrap mixins.

[B3Kay]

@B3Kay Sadly, there's nothing I can do to change the order of the classes. Svelte applies its component scoping styles last and there's no way to apply additional classes after that afaik (except by doing it through JS at run time which would cause flashing styles and be a can of worms).

I'm not a Tailwind user myself but I had assumed it would work the same way as applying any other classes that are defined by global CSS. That does work as you can see in this example:

https://multiselect.janosh.dev/css-classes#external-css-classes

This happens unfortunately in the demo aswell:


You can see that the wrapper class wont be applied.

[janosh]

@B3Kay Good catch. I hadn't looked at that example in a while and it's not tested. You can fix that by appending !important to every rule which is, of course, really annoying. But I'm not aware of a better solution at the moment. Again it's due to the still-open Svelte issue I linked above about Svelte tripling its CSS hashes, thereby increasing specificity and making it harder to override default styles.