Skip to content

Isoler les portées CSS, mettre le nouveau code couleur, faire un peu de ménage

Benoît Courty requested to merge parameter into master

Created by: LoicPoullain

CSS avec une porté isolée (isolated scope)

Pour chaque composant Xyz.jsx, nous pouvons créer un module scss Xyz.module.scss pour définir le style du composant. La portée des classes définies dans chaque module est locale. On peut donc créer deux classes .hello-world dans deux fichiers séparés, celles-ci ne rentreront pas en conflit.

Comment utiliser les modules :

// Xyz.module.scss
.error {
  // ...
}
import styles from "./Xyz.module.scss";

// Xyz.jsx
export function Xyz () {
  return <span className={styles.error}>hhh</span>;
}

La manière de fonctionner en Angular est très similaire.

https://github.com/css-modules/css-modules https://github.com/zeit/next-plugins/tree/master/packages/next-sass https://nextjs.org/docs/basic-features/built-in-css-support

Variables scss

Le fichier styles/_variables.scss peut être utilisé pour des définir des variables globales comme par exemple la couleur du PLF.

Le composant Parameter

Ce composant unique permet d'afficher la valeur du code existant avec des valeurs "réforme" et "PLF" si elles existent. La valeur "réforme" peut être éditable ou non. Je conseille de tester le composant sur Scalingo pour bien comprendre son fonctionnement.

Merge request reports