When do I use attrs vs passing props directly with styled-components?

Question

I am a bit confused as to when I should use the attrs constructor to pass props in styled-components:

const Example = styled.div.attrs(props => ({
  style: {
    color: props.color
  }
}))``;

and when I should just pass them direcly:

const Example = styled.div`
    color: ${props => props.color}
`

I understand that the first method is changing the in-line style and the second is generating a class but I'm unsure of the implications of these differences.

I have seen an error in the console that says "Over 200 classes were generated for component styled.div. Consider using the attrs method, together with a style object for frequently changed styles."

But at the same time it says in the docs "The rule of thumb is to use attrs when you want every instance of a styled component to have that prop, and pass props directly when every instance needs a different one."

Why not just use one of these methods all the time? When should I use each one and why?

Answer 1

(TL;DR at the end)

The problem is that you're reading about two separate use-cases, and assuming that they are explaining the same thing.

The Styled Components .attrs method is for passing props to a styled component. When the docs say that you should use .attrs "when you want every instance of a styled component to have that prop", they mean something like this:

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

This means that when you use <CheckboxInput />, it will be a checkbox by default, no need to define the prop type="checkbox" every time. This is the main purpose of the .attrs method.

So you understand that when you add style to that component's attrs, it's exactly the same as passing style as a prop to a regular, non-styled component. It just adds that style as an inline style, skipping any optimisation that styled-components might make. Inline styles aren't usually recommended because they will always be attached as an individual style to every version of that component. Example:

// items is some array with 100 elements
items.map(item => (
  <button style={{ background: 'blue' }} >{item.text}</button>
));

This would generate 100 buttons, and each button would have their own instance of the background: blue style.

With Styled Components, you would do this:

const button = styled.button`
   background: blue;
`;

This would generate the style only once, no matter how many buttons you have. Because it actually generates a CSS class.

Unfortunately, generating CSS classes isn't a lightweight operation, so if for instance you're doing animations or doing anything that changes a style frequently, it's recommended to go with inline styles instead.

TL;DR:

• Use styled components for static styles and dynamic styles that don't change very often;
• Use inline styles (through .attrs) for styles that change frequently, like for animations.