shouldForwardProp
Styled-Components 🔴 SeniorDefinition
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.