Emotion (@emotion/react)

Definition

Librairie CSS-in-JS performante offrant deux APIs : styled (comme styled-components) et css prop (styles inline avec typage). Souvent plus rapide que styled-components.

Analogie

Le couteau suisse du CSS-in-JS : plusieurs outils (styled, css prop) dans un seul package.

Exemple de code

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import styled from '@emotion/styled'

const style = css`color: red; font-size: 1.2rem;`
<div css={style}>Emotion css prop</div>

const Box = styled.div`padding: 1rem;`

Cas d'usage

Alternative performante a styled-components avec l'avantage du css prop pour du styling inline.

Termes lies