Warning: Received `true` for non-boolean attribute `gray`.

How can I resolve this warning?

Warning: Received `true` for non-boolean attribute `gray`. If this is expected, cast the value to a string. warning.js:33 

The code is looks like this.

export const Button = styled(Link).attrs({
  width: props => props.width || '100%',
})`
  display: block;
  width: ${props => props.width};
  text-align: center;
  color: #fff;
  background-color: ${props => props.gray ? '#bababa' : '#ea352d'};
`;

export default class Hoge extends React.PureComponent {
  render() {
    return (
      <Button gray to='path/to/page'>hoge</Button>
    );
  }
}

When I passed gray props, the warning happened.

modules version.

• styled-components: 2.2.0
• react-router: 4.2.0
• react-router-dom: 4.2.2

[MisterTaki]

Temporarily: <Button gray={gray ? 1 : 0} to='path/to/page'>hoge</Button>

It works for me 😃

[probablyup]

There’s nothing to be done here. Just don’t pass the prop to the DOM element if you’re using a custom component.