Managing highly dynamic styles

Example component:

const Comp = styled.div`
     /*lots of styles here*/
     animation-delay: ${ props => props.index * 0.1 };
`;

With this component rendered over a collection of items, we’ll generate a new style tag with an associated class for each one.

Is there a recommended way of working with these kinds of styles so as not to thrash the head with a new style tag everytime render is called on Comp?

• One solution could be to move the /* lots of styles here */ into another component that doesn’t include the dynamic properties that cause huge amounts of CSS to be rendered into the head. This way the generated style tag only contains the animation-delay property. Still a lot of style tags being injected into the head though and since the injection only happens at render time, this could cause some trashing.
• Another option is to put the animationDelay into the style prop of the component as we compose the components and not let styled-components handle this.

How would you do this? Is there a recommended approach?

I saw there might be some plans to extract static styles which, as a solution, is similar to our first option above.

[mxstbr]

I’ll finally close this discussion since a lot of things have changed since the initial kickoff by @JamieDixon. (thanks!)

1. We’ve added a warning when you change styles too often that logs to the console and suggests using inline styles for highly dynamic styles to avoid this kind of confusion.
2. We now have the .attrs selector, making dynamic styles that come in via props possible with inline styles. You could change the bg prop of this component a lot of times without running into performance issues. (I’d be interested to see the color picker from above reworked this way though!)

const HighlyDynamicComponent = styled.div.attrs({
  style: props => ({
    background: props.bg,
  })
})`
  color: blue;
`

1. More future-wise we’re focusing on performance at the moment, @geelen has found a way to batch style injection that’ll come out with the next patch release which will speed up initial and rerenders by orders of magnitude. We’ll finally be in a similar spot to all other CSS in JS libraries, which means many more dynamic use cases will now be possible too!

That should clear up most, if not all concerns around highly dynamic styles and styled-components. If you have further issues, suggestions or comments please feel free to open a new issue with your ideas!

[JamieDixon]

@mxstbr Better late than never!

It works beautifully. Thanks for the great work everyone. SC has made such a difference to our project.