Emotion/Styled creates a large number of unique classNames

Viewed 97

I'm creating a browser game with React, and the background is composed of seperate Tile components. These tend to have the same styles, in my case;

const BaseTile = styled.div`
  width: 40px;
  height: 40px;
  position: absolute;
`;

However, on every Tile the background-image may be different, and the transform values are always different. As a result, Emotion/Styled creates a large amount of classNames. I'm concerned about this potentially becoming a performance issue. Any suggestions for my use-case would be appreciated.

Example

0 Answers
Related