Skip to content
Obsah stránky

CSS funkce pro SFC

Scoped CSS

Když má sekce <style> atribut scoped, její CSS se aplikuje pouze na prvky aktuální komponenty. To je podobné zapouzdření stylů v Shadow DOM. S tím jsou spojena některá omezení, ale nejsou vyžadovány žádné polyfills. Toho se dosáhne pomocí PostCSS transformace následujícího kódu:

vue
<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">ahoj</div>
</template>

Na toto:

vue
<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <div class="example" data-v-f3f3eg9>ahoj</div>
</template>

Root elementy komponent potomka

Se scoped atributem nebudou styly komponenty rodiče prosakovat do komponent potomků. Nicméně root element komponenty potomka bude ovlivněn jak rodičovským scoped CSS, tak vlastním scoped CSS. Toto je záměr, aby rodič mohl stylovat root element svého potomka pro účely rozvržení (layout).

Deep selektory

Pokud chcete, aby selektor ve scoped stylech byl „hluboký“ a ovlivňoval i komponenty potomků, můžete použít pseudotřídu :deep():

vue
<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

Výše uvedený kód se zkompiluje na:

css
.a[data-v-f3f3eg9] .b {
  /* ... */
}

TIP

Obsah DOM vytvořený pomocí v-html není ovlivněn scoped styly, ale pomocí deep selektorů jej stále lze stylovat.

Selektory pro sloty

Ve výchozím nastavení scoped styly neovlivňují obsah vykreslený pomocí <slot/>, protože ty jsou považovány za vlastnictví komponenty rodiče, která je předává. Pro explicitní cílení na obsah slotu použijte pseudotřídu :slotted:

vue
<style scoped>
:slotted(div) {
  color: red;
}
</style>

Globální selektory

Pokud chcete, aby se pravidlo aplikovalo globálně, můžete místo vytváření dalšího <style> použít pseudotřídu :global (viz níže):

vue
<style scoped>
:global(.red) {
  color: red;
}
</style>

Kombinace lokálních a globálních stylů

Můžete také do stejné komponenty zahrnout jak lokální, tak globální styly:

vue
<style>
/* globální styly */
</style>

<style scoped>
/* lokální styly */
</style>

Tipy pro lokální styly

  • Lokální styly neodstraňují potřebu tříd. Kvůli způsobu, jakým prohlížeče vyhodnocují různé CSS selektory, bude p { color: red } mnohem pomalejší, když je použit s atributovým selektorem. Pokud místo toho použijete třídy nebo id, například .example { color: red }, prakticky tím tento problém výkonosti eliminujete.

  • Buďte opatrní s selektory potomků v rekurzivních komponentách! Pro CSS pravidlo se selektorem .a .b, pokud prvek odpovídající .a obsahuje rekurzivní komponentu potomka, pak všechny .b v této komponentě potomka budou pravidlu odpovídat.

CSS moduly

Tag <style module> je kompilován jako CSS moduly a vystavuje výsledné CSS třídy komponenty jako objekt pod klíčem $style:

vue
<template>
  <p :class="$style.red">Toto by mělo být červené</p>
</template>

<style module>
.red {
  color: red;
}
</style>

Výsledné třídy jsou hashovány, aby se předešlo kolizím, čímž se dosáhne stejného efektu omezování platnosti CSS pouze na aktuální komponentu.

Pro více podrobností, jako jsou globální výjimky a kompozice, se podívejte na specifikaci CSS modulů.

Vlastní název implementovaných tříd

Můžete přizpůsobit klíč vlastnosti implementovaného objektu tříd tím, že atributu module přiřadíte hodnotu:

vue
<template>
  <p :class="classes.red">červená</p>
</template>

<style module="classes">
.red {
  color: red;
}
</style>

Použití s Composition API

Na implementované třídy lze přistupovat v setup() a <script setup> pomocí API useCssModule. Pro bloky <style module> s vlastními implementovanými názvy přijímá useCssModule odpovídající hodnotu atributu module jako první parametr:

js
import { useCssModule } from 'vue'

// uvnitř scope setup()...
// výchozí, vrací třídy pro <style module>
useCssModule()

// pojmenovaný, vrací třídy pro <style module="classes">
useCssModule('classes')
  • Příklad
vue
<script setup lang="ts">
import { useCssModule } from 'vue'

const classes = useCssModule()
</script>

<template>
  <p :class="classes.red">ahoj</p>
</template>

<style module>
.red {
  color: red;
}
</style>

v-bind() v CSS

SFC sekce <style> podporuje propojení CSS hodnot s dynamickým stavem komponenty pomocí funkce v-bind v CSS:

vue
<template>
  <div class="text">ahoj</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

<style>
.text {
  color: v-bind(color);
}
</style>

Syntaxe funguje s <script setup> a podporuje JavaScriptové výrazy (musí být obalené v jednoduchých uvozovkách):

vue
<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>ahoj</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

Skutečná hodnota bude zkompilována do hashované custom CSS vlastnosti, takže CSS je stále statické. Custom vlastnost bude aplikována na root element komponenty pomocí inline stylů a reaktivně aktualizována, pokud se změní zdrojová hodnota.

CSS funkce pro SFC has loaded