diegohaz/styled-tools

invalid valid for prop 'color' on <span /> tag

Tycholiz opened this issue · 1 comments

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

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.