|
1 | 1 | --- |
2 | | -title:style: |
| 2 | +title:style and style: |
3 | 3 | --- |
4 | 4 |
|
| 5 | +There are two ways to set styles on elements: the`style` attribute, and the`style:` directive. |
| 6 | + |
| 7 | +##Attributes |
| 8 | + |
| 9 | +Primitive values are treated like any other attribute: |
| 10 | + |
| 11 | +```svelte |
| 12 | +<div style={big ? 'font-size:2em' : 'font-size:1.2em'}>...</div> |
| 13 | +``` |
| 14 | + |
| 15 | +###Objects and arrays |
| 16 | + |
| 17 | +Since Svelte 5.XX,`style` can be an object or array, and is converted to a string according to the following rules : |
| 18 | + |
| 19 | +If the value is an |
| 20 | + |
| 21 | +If the value is an object, the key/value are converted to CSS properties if the value is not-null and not-empty. |
| 22 | + |
| 23 | +```svelte |
| 24 | +<!-- equivalent to <div style="color:red;display:inline"> --> |
| 25 | +<div style={{ color: 'red', display: 'inline', background: null }}>...</div> |
| 26 | +``` |
| 27 | + |
| 28 | +>[!NOTE] |
| 29 | +>The CSS properties are case-insensitive and use`kebab-case`, which requires quoting key's name in JavaScript. |
| 30 | +>In order to avoid this, object keys will be 'converted' according to the following rules : |
| 31 | +>* Uppercase keys like`COLOR` will be converted to the lowercase format`color`. |
| 32 | +>*`camelCase` keys like`fontSize` will be converted to the kebab-case format`font-size`. |
| 33 | +>*`snake_case` keys like`border_color` will be converted to the kebab-case format`border-color`. |
| 34 | +>Note that this will not apply to key that starts with a double hyphens, because CSS variable don't have naming rules and are case-sensitive (`--myvar` is different from`--myVar`). |
| 35 | +>But we can use a double underscores to enable the same rules. Ex:`__myVar` or`__my_var` will be converted to`--my-var`. |
| 36 | +
|
| 37 | +If the value is an array, the truthy values are combined, string are passed without change, and array/objects are flatten : |
| 38 | + |
| 39 | +```svelte |
| 40 | +<!-- equivalent to <div style="color:red;display:inline;--my-var:0;font-size:2em;background: black"> --> |
| 41 | +<div style={['color:red', {display:'inline'}, [{__my_var: 0, fontSize: '2em'}, 'background: black']]}>...</div> |
| 42 | +``` |
| 43 | + |
| 44 | +This is useful for combining local styles with props, for example: |
| 45 | + |
| 46 | +```svelte |
| 47 | +<!--- file: Button.svelte ---> |
| 48 | +<script> |
| 49 | +let props = $props(); |
| 50 | +</script> |
| 51 | +
|
| 52 | +<button {...props} style={[props.style, {color:'red', background:'black'}]}> |
| 53 | +{@render props.children?.()} |
| 54 | +</button> |
| 55 | +``` |
| 56 | + |
| 57 | + |
| 58 | +Svelte also exposes the`StyleValue` type, which is the type of value that the`style` attribute on elements accept. This is useful if you want to use a type-safe class name in component props: |
| 59 | + |
| 60 | +```svelte |
| 61 | +<script lang="ts"> |
| 62 | +import type { StyleValue } from 'svelte/elements'; |
| 63 | +
|
| 64 | +const props: { style: StyleValue } = $props(); |
| 65 | +</script> |
| 66 | +
|
| 67 | +<div style={[props.style, {color: 'red'}]}>...</div> |
| 68 | +``` |
| 69 | + |
| 70 | + |
| 71 | +##The`style:` directive |
| 72 | + |
5 | 73 | The`style:` directive provides a shorthand for setting multiple styles on an element. |
6 | 74 |
|
7 | 75 | ```svelte |
|