Linaria

CSS-in-JS 🔴 Senior

Définition

Librairie CSS-in-JS zéro-runtime avec une syntaxe tagged template literals (comme styled-components). Le CSS est extrait au build, zéro JS en prod.

Analogie

styled-components qui fait un régime : même syntaxe, mais sans le poids JavaScript en production.

Exemple de code

import { styled } from '@linaria/react'
import { css } from '@linaria/core'

const title = css`font-size: 2rem; color: blue;`
const Box = styled.div`
  padding: 1rem;
  background: ${() => 'white'};
`

Cas d'usage

Migrer depuis styled-components vers du zéro-runtime sans changer la syntaxe.

Termes liés

#styling#css-in-js

← → au clavier pour passer d'une fiche à l'autre