La bellezza dell'ecosistema che ruota attorno a React è la vastità di librerie che abbiamo a disposizione. In questo script ci soffermiamo su una in particolare: CSS Module.

Grazie a CSS Module, possiamo facilmente creare dei micro-moduli CSS da incorporare all'interno della pagina.

In questo ambito molte librerie utilizzano una sintassi JavaScript al cui interno scrivere il CSS sottoforma di stringa. Con CSS Module non ve ne sarà bisogno, perchè tutto il lavoro sporco lo farà il pre-compilatore.

/* Button.module.css */
.miaClasse {
  background-color: #123123;
  color: #ddd;
  font-weight: light;
  padding: 5px;
  border-radius: 3px;
  cursor: pointer;
}

.miaClasse:hover {
  background-color: #666;
}

Partendo da questo file CSS, l'implementazione all'interno del componente sarà la seguente.

import styles from './Button.module.css';

const Button = () => (
  <button className={styles.miaClasse}>
    Button
  </button>
);

export default Button;