Griffel

Définition

Librairie CSS-in-JS de Microsoft (utilisée dans Fluent UI) qui génère du CSS atomique. Supporte l'ahead-of-time compilation et le merge intelligent de styles.

Analogie

Le système 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 nécessitant du CSS atomique avec compilation AOT.

Termes liés