How to improve the reusability of styles in styled-components?

Question

Layout

After a certain time of working on a project where styled-components is used for layout, I began to catch myself thinking that I often have to copy-paste pieces of code like:

display: flex;
flex-direction: row;
width: 100%;

Of course, "backbone" parameters, such as theme colors, fonts, etc. are entered in variables, but the moment described above is too much itching.

The question is - does it make sense to separate a separate css class for such frequently used combinations of properties and assign it to the component in the markup itself via className instead of prescribing these properties each time in the styled? Will this change the size of the bundle for the better, because styled still writes all these properties inline?

PS I'm aware of the fact that you can assign a similar "blank" using a js-object to style={}, but this is far from always suitable, because style={} is often used with ternarks to style states.

Answer 1

Create a separate file and pass through the props.
But in general, you can duplicate the style. But he takes his place!
If the project will move in positions in the search results, then page loading speed is important for the robot. Perhaps these dozens of lines will separate your site from the first place)