Can't use createStyles() with svelteui Buttons

[izzy]

What package has an issue

@svelteuidev/core

A clear and concise description of what the bug is

While it is possible to style Tabs by default like this:

const useStyles = createStyles((theme) => ({
    ".svelteui-Tab-root": {
        color: theme.fn.themeColor("orange", 2),
    },
}));

$: ({ getStyles } = useStyles());

I could not find any way to do the same with Button elements. When looking at the output it seems that Tabs get certain svelteui-Tab-* classes, while Buttons won't get these.

Styling the lowercase button element does not work as expected either, it will - for some reason - only style other buttons(like those in the Tab) but not the button inside a Button.

In which browser(s) did the problem occur?

Other - list in description

Steps To Reproduce

1. Create Tabs and Button Elements
2. Try to style both using createStyles()
3. Buttons won't get any styling

Do you know how to fix the issue

No

Are you willing to participate in fixing this issue and create a pull request with the fix

No

Relevant Assets

No response

[BeeMargarida]

Hi! The svelteui-Button-root problem should be fixed in the next version. Regarding overriding styles, in case of the button you would need to pass !important since there are more specific classes (variant classes) being applied to it, for example the code below would work:

const useStyles = createStyles((theme) => ({
    root: {
        color: 'red !important',
    },
}));

$: ({ getStyles } = useStyles());

...

<Button class={getStyles()}>Click me</Button>

[BeeMargarida]

Should be fixed in the new version 0.12.0