Dans ce chapitre, je vous propose de découvrir comment gérer les styles au niveau de vos composants Vue.js. Par défaut, lorsque le code est compilé, le CSS dans les balises <style> va être placé dans un fichier CSS séparé. Dans ces conditions, il est important de faire en sorte que les classes que l'on utilise soient uniques, mais Vue.js offre des mécaniques qui vont nous permettre de gérer automatiquement l'isolation des styles.
Style "scoped"
La première mécanique est la mise en place d'un attribut scoped au niveau de notre balise style. Cet attribut va permettre de rajouter une condition lorsque les sélecteurs CSS vont être générés.
<style scoped>
.container {}
</style>Une fois compilé le sélecteur deviendra
.container[v-data-a6737]Vue.js va rajouter un attribut sur l'ensemble des éléments injectés dans le DOM. Cet attribut permettra au sélecteur CSS de n'impacter que les éléments qui correspondent à ce composant directement.
Vous pouvez contrôler la portée d'un sélecteur à l'aide de la pseudo class :deep() :
<style scoped>
.container p{} /* deviendra ".container p[data-v-a6737]" */
.container :deep(p) {} /* deviendra ".container[data-v-a6737] p" */
</style>Pour plus d'informations, vous pouvez vous rendre sur la page de la documentation.
Modules CSS
Afin de limiter la portée des sélecteurs CSS, il est aussi possible d'utiliser le système de module CSS.
<template>
<p :class="$style.red">This should be red</p>
</template>
<style module>
.red {
color: red;
}
</style>Style dynamique
Si votre style dépend d'une variable d'un composant, vous avez la possibilité d'utiliser v-bind au niveau de la partie style.
<script setup>
import { ref } from 'vue'
const theme = ref({
color: 'red',
})
</script>
<template>
<p>Bonjour</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>Vue.js va générer une variable CSS qui sera changée lorsque la valeur à l'intérieur de la ref change.
