.attrs()

Définition

Méthode chainable qui attache des attributs par défaut ou calcules a un styled component. Évite de répéter les mêmes props a chaque utilisation.

Analogie

Les réglages par défaut d'un appareil : tu les configures une fois, plus besoin d'y penser.

Exemple de code

const Input = styled.input.attrs(({ $size }) => ({
  type: 'text',
  size: $size || '1em',
}))`
  padding: ${({ size }) => size};
  border: 1px solid #ccc;
  border-radius: 4px;
`
// <Input $size="2em" />

Cas d'usage

Définir des attributs HTML par défaut (type, role, aria-*) sur un styled component.

Termes liés