shouldForwardProp

Styled-Components 🔴 Senior

Definition

Configuration qui filtre les props passees au DOM. Empeche les props custom de generer des attributs HTML invalides et des warnings React.

Analogie

Un videur de boite : il laisse passer les props HTML valides et refuse les custom.

Exemple de code

import styled from 'styled-components'
import isPropValid from '@emotion/is-prop-valid'

const Box = styled('div').withConfig({
  shouldForwardProp: (prop) =>
    isPropValid(prop) && prop !== 'color',
})`
  color: ${({ color }) => color};
`

Cas d'usage

Eviter les warnings React 'Unknown prop' quand des props custom sont utilisees pour le styling.

Termes lies

#styling#css-in-js