How to make styled-components more reusable?

  • 0
    After some time working on a project where styled-components is used for layout, I began to catch myself thinking that very often I have to copy and paste pieces of code like:
    display: flex;
    flex-direction: row;
    width: 100%;

    Of course, the "backbone" parameters, like theme colors, fonts, etc. are entered into variables, but the moment described above itches too much.

    The question is - does it make sense to select 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 writing these properties every time in styled? Will this change the size of the bundle for the better, since styled still prescribes all these properties inline?

    P.S. I'm aware of the fact that you can assign such a "blank" using a js-object in style = {}, but this is far from always suitable, because style = {} is often used with ternarks to style states.
    React Anonymous, Nov 2, 2019

  • 1 Answers
  • 0
    Create a separate file and throw it through the props.

    But in general, you can duplicate the style. But he takes up space!

    If the project moves through the positions in the search results, then the page load speed is important for the robot. Perhaps these dozens of lines will separate your site from the first place)

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!