I have a problem with adding styles in my Svelte components. I want to make sure that my styles are only applied within a specific component, but it doesn't work.
Here is an example of a component. There is the <style> inside the component tag, so it will be applied globally (this works - all elements of type button in the entire application get red):
<script> import { Button } from "flowbite-svelte";</script><div><Button>Test Button</Button><style> button { background-color: red; }</style></div>According to the Svelte documentation, I should be able to place the <style> tag outside of the HTML Elements in the file to apply the style only to the current component.
Here is my updated code:
<script> import { Button } from "flowbite-svelte";</script><div><Button>Test Button</Button></div><style> button { background-color: red; }</style>However, I get the following error:
Unused CSS selector "button"svelte(css-unused-selector)
How can I ensure that my styles are restricted locally to the component?