Tropix126
commented
2 years ago Most components at the moment use the $$restProps feature of svelte, which passes all "unknown" props given to a component down to a specific element as HTML attributes. In fluent-svelte, the element these props are passed down to varies based on the component's functionality. In most cases, it's the outermost element of the rendered component.
So: in most cases you can actually use the style attribute to some extent. The problem here is that components are not a single element meant to be styled this way. Components are a complex tree of elements that render into an encapsulated UI pattern.
Rather than using this approach, a better method to style fluent-svelte components would be to use global styling + custom class names. At the moment almost all components have the option to provide a class prop, which will be applied to the outermost element in the component, meaning we can do something like this:
<script>
import { Button } from "fluent-svelte";
</script>
<Button class="custom-button">Button With Custom Styling</Button>
<style>
:global(.custom-button) {
padding: 20px;
}
</style>This is better for a few reasons:
- It avoids the specificity hell you get into when using inline styles. The
styleattribute can only be overridden by an inline style below it or the!importantflag. - You can still get scoped styles.
:globalin svelte essentially tells the compiler not to attach a hashed classname to a given piece of CSS, but you can also have something like.container :global(.custom-button) {}which will preserve a scope of.container.svelte-<hash>. - In general it avoids the confusion of where
{...$$restProps}will be applied. Classes in fluent-svelte are always applied to the outermost given element.
Odonno
Before you start...
Description
Have you considered providing
styleprop on component so we can override CSS style the easy way?Alternative solutions
No response
Relevant Assets
No response