The design of your application can define its success; therefore, as a developer, you need to think about how to organize your CSS to have the greatest impact. The traditional way to organize CSS files in your React app is to import them into each component that is using that style and then assigning styles with a className.
There are tools out there like Sass and Less that help you with this division of styles, and break them down for you into separate stylesheet files. Tools like these allow you to use variables, rules, and functions that are compatible with CSS so you can personalize your app however you like. However, there is one significant downside. These tools force you to separate your styles from your component. If you are looking at a CSS file in this manner, you have no clue which component is using it. It’s like a global variable — you don’t have any guarantees about where they’re being used, or what the effects would be if you changed them. With a big codebase, this can be frustrating when you don’t know how changes to CSS will affect specific components or which elements on the page it will break.
Let’s take the following CSS as an example. What parts of the React codebase would be affected by changing this CSS? The answer is — we don’t know, we need to search around the code and spend time figuring it out.
Advantages of Styled Components
The solution to this problem is scoping your styles. The idea is that you will write your CSS in a specific predetermined context. In this way, you are styling components individually, all in one place. This means that the layout, styling, and app logic all lives in one place in your code. Because of this, when you make changes, you’ll know what it’s affecting, and you will avoid surprises in production. Styled components make it easy to understand what’s going on because you won’t have to go back and forth between the CSS and js files — It removes this mapping between components and styles, reducing confusion and time wasted going back and forth.
Styled components keep track of which components are rendered on a page and automatically inserts all of their styles. This provides better performance for your React app because your users load the least amount of code necessary. Styled components also create and insert unique class names for all of the styles you have. This is great for developers because you don’t have to worry about using the same name twice, or misspelling a name. They say the hardest part of programming is naming things, right? Styled-components have you covered!
Styled components make stale CSS code obvious because every piece of styling is mapped to a specific component. If the component is not being used and subsequently gets deleted, all its styles get deleted with it. With Styled components, you never have to hunt across different files to find the styling affecting your component, so maintenance is a breeze, no matter how big your codebase is.
Installing and Setting Up Styled Components
The first thing you need to do is add the following dependency in the root folder of your project:
Next, import it to your component:
In the component, you want to define a style. For example:
You can use the standard CSS properties, and combine them with pseudo selectors. Note the back-ticks surrounding the CSS strings in the code above. With the
styled.button tag provided by styled-components, you create a styled version of the standard React button component. The code applies CSS to that component without affecting any other style or layout in your application.
You then use your new styled component in your JSX as usual. In our button example, it would look like this:
Learn More About React
Styled components provide developers with a wonderful developer experience. It helps to reduce confusion around styling, clearly points out which components are mapped to which styles, and automatically generates unique class names.
- Learn how to set up Feature Flags with React in 10 Minutes
- Read more about feature flags in our free Feature Flag Best Practices eBook
- Watch this video on Feature Flag Best Practices