mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
5.3 KiB
236 lines
5.3 KiB
4 months ago
|
---
|
||
|
|
title: Styles & Classes
|
||
|
|
---
|
||
|
|
|
||
|
|
- style scoping
|
||
|
|
- `:global`
|
||
|
|
- `style:`
|
||
|
|
- `class:`
|
||
|
|
- `--css` props
|
||
|
|
|
||
|
|
Styling is a fundamental part of UI components. Svelte helps you style your components with ease, providing useful features out of the box.
|
||
|
|
|
||
|
|
## Scoped by default
|
||
|
|
|
||
|
|
By default CSS inside a `<style>` block will be scoped to that component.
|
||
|
|
|
||
|
|
This works by adding a class to affected elements, which is based on a hash of the component styles (e.g. `svelte-123xyz`).
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<style>
|
||
|
|
p {
|
||
|
|
/* this will only affect <p> elements in this component */
|
||
|
|
color: burlywood;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
4 months ago
|
## :global(...)
|
||
|
4 months ago
|
|
||
|
4 months ago
|
To apply styles to a single selector globally, use the `:global(...)` modifier:
|
||
|
4 months ago
|
|
||
|
|
```svelte
|
||
|
|
<style>
|
||
|
|
:global(body) {
|
||
|
4 months ago
|
/* applies to <body> */
|
||
|
4 months ago
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div :global(strong) {
|
||
|
4 months ago
|
/* applies to all <strong> elements, in any component,
|
||
|
|
that are inside <div> elements belonging
|
||
|
|
to this component */
|
||
|
4 months ago
|
color: goldenrod;
|
||
|
|
}
|
||
|
|
|
||
|
4 months ago
|
p:global(.big.red) {
|
||
|
|
/* applies to all <p> elements belonging to this component
|
||
|
|
with `class="big red"`, even if it is applied
|
||
|
|
programmatically (for example by a library) */
|
||
|
4 months ago
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
If you want to make @keyframes that are accessible globally, you need to prepend your keyframe names with `-global-`.
|
||
|
|
|
||
|
|
The `-global-` part will be removed when compiled, and the keyframe will then be referenced using just `my-animation-name` elsewhere in your code.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<style>
|
||
|
|
@keyframes -global-my-animation-name {
|
||
|
|
/* code goes here */
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
4 months ago
|
## :global
|
||
|
|
|
||
|
|
To apply styles to a group of selectors globally, create a `:global {...}` block:
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<style>
|
||
|
|
:global {
|
||
|
|
/* applies to every <div> in your application */
|
||
|
|
div { ... }
|
||
|
|
|
||
|
|
/* applies to every <p> in your application */
|
||
|
|
p { ... }
|
||
|
|
}
|
||
|
|
|
||
|
|
.a :global {
|
||
|
|
/* applies to every `.b .c .d` element, in any component,
|
||
|
|
that is inside an `.a` element in this component */
|
||
|
|
.b .c .d {...}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
1 month ago
|
> [!NOTE] The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
|
||
|
4 months ago
|
|
||
|
4 months ago
|
## Nested style tags
|
||
|
|
|
||
|
|
There should only be 1 top-level `<style>` tag per component.
|
||
|
|
|
||
|
|
However, it is possible to have a `<style>` tag nested inside other elements or logic blocks.
|
||
|
|
|
||
|
|
In that case, the `<style>` tag will be inserted as-is into the DOM; no scoping or processing will be done on the `<style>` tag.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<div>
|
||
|
|
<style>
|
||
|
|
/* this style tag will be inserted as-is */
|
||
|
|
div {
|
||
|
|
/* this will apply to all `<div>` elements in the DOM */
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## class:_name_
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
class:name={value}
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
class:name
|
||
|
|
```
|
||
|
|
|
||
|
|
A `class:` directive provides a shorter way of toggling a class on an element.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!-- These are equivalent -->
|
||
|
|
<div class={isActive ? 'active' : ''}>...</div>
|
||
|
|
<div class:active={isActive}>...</div>
|
||
|
|
|
||
|
|
<!-- Shorthand, for when name and value match -->
|
||
|
|
<div class:active>...</div>
|
||
|
|
|
||
|
|
<!-- Multiple class toggles can be included -->
|
||
|
|
<div class:active class:inactive={!active} class:isAdmin>...</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## style:_property_
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
style:property={value}
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
style:property="value"
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
style:property
|
||
|
|
```
|
||
|
|
|
||
|
|
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>
|
||
|
|
|
||
|
|
<!-- Variables can be used -->
|
||
|
|
<div style:color={myColor}>...</div>
|
||
|
|
|
||
|
|
<!-- Shorthand, for when property and variable name match -->
|
||
|
|
<div style:color>...</div>
|
||
|
|
|
||
|
|
<!-- Multiple styles can be included -->
|
||
|
|
<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>
|
||
|
|
|
||
|
|
<!-- Styles can be marked as important -->
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
## --style-props
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
--style-props="anycssvalue"
|
||
|
|
```
|
||
|
|
|
||
|
|
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
|
||
|
|
|
||
|
|
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />
|
||
|
|
```
|
||
|
|
|
||
|
|
Desugars to this:
|
||
|
|
|
||
|
|
```svelte
|
||
4 weeks ago
|
<svelte-css-wrapper style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
|
||
|
4 months ago
|
<Slider bind:value min={0} max={100} />
|
||
|
4 weeks ago
|
</svelte-css-wrapper>
|
||
|
4 months ago
|
```
|
||
|
|
|
||
|
|
For SVG namespace, the example above desugars into using `<g>` instead:
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
|
||
|
|
<Slider bind:value min={0} max={100} />
|
||
|
|
</g>
|
||
|
|
```
|
||
|
|
|
||
|
4 weeks ago
|
> [!NOTE] Since this is an extra `<svelte-css-wrapper>` (or `<g>`), beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
|
||
|
4 months ago
|
|
||
|
|
Svelte's CSS Variables support allows for easily themeable components:
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<style>
|
||
|
|
.potato-slider-rail {
|
||
|
|
background-color: var(--rail-color, var(--theme-color, 'purple'));
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
So you can set a high-level theme color:
|
||
|
|
|
||
|
|
```css
|
||
|
|
/* global.css */
|
||
|
|
html {
|
||
|
|
--theme-color: black;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Or override it at the consumer level:
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<Slider --rail-color="goldenrod" />
|
||
|
|
```
|