.attrs docs needs clarification

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

The attrs function passes all attributes directly to the dom node. so it should only be used with “safe” values that won’t trigger html incompatibilities.

In the docs the word “props” is being used.

“It allows you to attach additional props (or “attributes”) to a component.”

And it implies that it should be used for organizing the data logic before the css expression. The example actually uses them for something similar to “defaultProps”. If you use it like the docs tells you to you will suddenly generate tons of react warnings.

The docs should be clearer about this function intended behavior to prevent these confusions.

PS: The behavior that the documentation implies is actually really helpful and the impossibility to use it like this creates the need for workarounds like creating wrapper-components. Would creating a .props functionality that behaves exactly like attrs but without the dom printing be something to consider? By creating wrapper components you’re suddenly breaking the styled-components “flow” preventing further “extensions”. With a props functionality tons of compositions would be possible.

[sarneeh]

@lifeiscontent @AshCoolman

I came into the same confusion after trying out .attrs() but after messing around with it for a while it’s pretty clear what is its purpose and how does it work.

Consider this example:

const Div = styled.div.attrs({
  color: 'red'
})`
  color: ${props => props.color};
`;

Div.defaultProps = {
  color: 'green'
};

...

<Div color="blue" />

So what happens here is (step by step):

1. Div has been used with color prop with value blue
2. Div has a default prop color with value green, but it is overridden by the color prop passed in <Div color="blue" />
3. Incoming props (passed explicitly or from defaultProps) arrive in the attrs function and get merged with the object passed to attrs - where what has been passed to attrs takes precedence (so the value red is being taken)
4. Computed props are being passed to the interpolations and the div is going to be rendered with color: red

So knowing the above I think we can deduce few hints:

1. Use attrs to specify immutable static props
2. Use attrs to compute other props based on incoming props (passed explicitly or from defaultProps)

So replacing defaultProps with attrs makes only sense, when you want the component to ALWAYS have some prop, because doing something like:

// replaced defaultProps with attrs based on example above

const Div = styled.div.attrs(props => ({
  color: props.color || 'green'
}))`
  color: ${props => props.color};
`;

doesn’t make any sense.

If my description is wrong please correct me @kitten

[oomathias]

I’m regrouping some info from 2258. I still see a lot of confusion around attrs in the issues.

Here is what happens under the hood since 4.1.2