Styled-components: extend.attrs triggers unknown prop warnings

[georgesboris]

Whenever I use extend and pass in attrs as well as additional styles I get warning about unknown props.

Example:

const InlineWrapper = styled.div`
  display: inline-flex;
`;

const PictureWrapper = InlineWrapper.extend.attrs({
  size: props => props.size || 2.4,
  color: props => props.color || 'rgba(0, 0, 0, 0.1)',
  labelColor: props => props.labelColor || '#757575'
})`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: ${props => props.size}rem;
  height: ${props => props.size}rem;
  border-radius: ${props => props.square ? '.2rem' : '50%'};
  border: ${props => props.noBorder ? '' : '.2rem solid white'};
  background-image: ${props => props.url ? `url(${props.url})` : 'none'};
  background-color: ${props => props.color};
  background-size: cover;
  color: ${props => props.labelColor};
`;

[mxstbr]

That function is called .attrs and not .props for a reason: Those are directly attached to the DOM node, unfiltered. If you want to set defaults we recommend using defaultProps:

const PictureWrapper = InlineWrapper.extend`

`

PictureWrapper.defaultProps = {
  labelColor: '#757575'
}

[georgesboris]

@mxstbr

https://www.styled-components.com/docs/basics#attaching-additional-props

In the docs the word "props" is being used.
"It allows you to attach additional props (or "attributes") to a component."

In the example 'margin' and 'padding' are used.
So there's some redundant code by applying the attrs to the component as well as overriding this attributes by css afterwards. This seems a pretty confusing design setup and the docs are misleading to say the least.

[kitten]

@georgesboris can you open an issue on the website's repo? It's indeed confusing and we need to clarify this :)