invalid valid for prop 'color' on <span /> tag
Tycholiz opened this issue · 1 comments
Tycholiz commented
I'm trying to pass a palette color as a prop, and everything is working fine in my program, but I'm getting this error:
Warning: Invalid value for prop
color
on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
here is the styled component:
const ColoredText = styled.span`
font-family: ${font('cursive')};
color: ${props => props.color};
`
and here is where I am rendering it:
<ColoredText color={palette('secondary', 2)}>way</ColoredText>
is this error something to be concerned about, or can I safely ignore it? The text is rendering the color as I'd expect
diegohaz commented
That's because color
is a valid HTML attribute, and therefore styled-components
passes it down to the underlying element. Choose another name for this prop (e.g. palette
).
Not a styled-tools issue, by the way.