React Desing Pattern: Reusable Style

On peut définir le css d'un component de deux manières, la 1er in line et la 2eme avec des classes.

On va donc passer en props, le style ou la classe qu'on veut:

const Box = ({ title, styleInLine = {}, classCustom })

Pour la gestion des class, c'est là où ça devient intéressant:

const classNames = [
    boxStyle.default,
    title === "with condition" ? boxStyle.withCondition : "",
    classCustom
  ]
    .join(" ")
    .trim();

On va utiliser un tableau dans lequel on va join et trim pour avoir une sortie du genre: 'class1 class2 class3'.

Ensuite on va pouvoir mettre des conditions dans le tableau pour afficher une class ou non:
title === "with condition" ? boxStyle.withCondition : "",

Et voilà ! c'est pas compliqué et c'est smart !