mirror of https://github.com/sveltejs/svelte
42 lines
863 B
42 lines
863 B
---
|
|
title: style:
|
|
---
|
|
|
|
The `style:` directive provides a shorthand for setting multiple styles on an element.
|
|
|
|
```svelte
|
|
<!-- These are equivalent -->
|
|
<div style:color="red">...</div>
|
|
<div style="color: red;">...</div>
|
|
```
|
|
|
|
The value can contain arbitrary expressions:
|
|
|
|
```svelte
|
|
<div style:color={myColor}>...</div>
|
|
```
|
|
|
|
The shorthand form is allowed:
|
|
|
|
```svelte
|
|
<div style:color>...</div>
|
|
```
|
|
|
|
Multiple styles can be set on a single element:
|
|
|
|
```svelte
|
|
<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
|
|
```
|
|
|
|
To mark a style as important, use the `|important` modifier:
|
|
|
|
```svelte
|
|
<div style:color|important="red">...</div>
|
|
```
|
|
|
|
When `style:` directives are combined with `style` attributes, the directives will take precedence:
|
|
|
|
```svelte
|
|
<div style="color: blue;" style:color="red">This will be red</div>
|
|
```
|