Transient Props ($prefix)

Styled-Components 🟡 Mid

Définition

Props prefixees par $ qui ne sont pas passées au DOM. Solution simple au problème de shouldForwardProp introduite dans styled-components v5.1.

Analogie

Un post-it sur un colis : le livreur le lit (pour le style) mais ne le colle pas sur la porte.

Exemple de code

const Box = styled.div`
  background: ${({ $bg }) => $bg};
  padding: ${({ $size }) =>
    $size === 'lg' ? '2rem' : '1rem'};
`
// $bg et $size ne sont PAS passes au DOM
<Box $bg="blue" $size="lg">Contenu</Box>

Cas d'usage

Passer des props de styling sans polluer le DOM avec des attributs HTML invalides.

Termes liés

#styling#interview#css-in-js