How organize Styled Components files in React project

Question

How should i organize Styled Components in React project? I mean for example - i have Navbar component to which i want add style. Should i create separate file NavbarStyle and import it to Navbar, create NavbarStyle in Navbar component or something else? Or it's just for general components like buttons?

And for this buttons and others - should i create separate files for example in styledComponents folder or one file with all of them and import just needed element? I know mostly it depends of our preference but i want hear some best practice advices (it look like StyledComponents docs say nothing about menage them in project).

Answer 1

The reason why React is so popular is because of freedom and project structure you are able to use. There are many good and bad practices of project structures, here is my simple opinion about it. In out company, we have decided to separate every component with its own style. So, for example, every button, checkbox etc. have own style file. We import all the classes directly into a component with:

import './checkbox.scss'

Because of that we directly know what CSS we need to edit, instead of searching for it in a big complex sass file, and this improves workflow.

Here is a simple example:

Answer 2

I know this question is quite old already, but i encountered same problem recently. This article was of great help to me. Basically it proposes to move component styles to separate file named like ComponentName.styles.ts, define styles, and make it exportable as part of a single object, like:

const Button = styled.button`...`;

const Styled = {
  Button
};

export default Styled;

That approach would allow you to both, nicely separate component's code and it's elements styles and at the same time make only single import, like import Styled from "./ComponentName.styles".