Griffel

Definition

Librairie CSS-in-JS de Microsoft (utilisee dans Fluent UI) qui genere du CSS atomique. Supporte l'ahead-of-time compilation et le merge intelligent de styles.

Analogie

Le systeme de style de Microsoft Office : industriel, performant, atomique.

Exemple de code

import { makeStyles } from '@griffel/react'

const useStyles = makeStyles({
  root: {
    display: 'flex',
    padding: '8px',
    ':hover': { backgroundColor: '#f0f0f0' },
  }
})
// const styles = useStyles(); <div className={styles.root}>

Cas d'usage

Projet Microsoft/Fluent UI necessitant du CSS atomique avec compilation AOT.

Termes lies