CODEWITHSUNDEEP
reactjscode-organizationproject-organizationstyled-components
Alan Wołejko
Alan Wołejko

Reputation: 452

How organize Styled Components files in React project

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).

Upvotes: 1

Views: 2323

Answers (2)

Grigoriy Mikhalkin
Grigoriy Mikhalkin

Reputation: 5573

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".

Upvotes: 1

Working Pig
Working Pig

Reputation: 194

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:

enter image description here

Upvotes: 1

Related Questions