Test Styled Components in Your React App

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.

.center {
  display: block;
  margin: auto;
}

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:

npm install -E styled-components

Next, import it to your component:

import styled from "styled-components";

In the component, you want to define a style. For example:

const CUSTOM_BLUE = "#4285f4";
const Button = styled.button`
  background: ${CUSTOM_BLUE};
  color: white;
  border-radius: 5px;
  padding: 30px;
  margin: 15px;
  font-size: 20px;
  :disabled {
    opacity: 0.5;
  }
  :hover {
    box-shadow: 0 0 10px yellow;
  }
`;

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:

<div>
  <Button>
    CLICK ME!
  </Button>
</div>

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

Be sure to follow us on Twitter @splitsoftware, and subscribe to our YouTube channel!

Get Split Certified

Split Arcade includes product explainer videos, clickable product tutorials, manipulatable code examples, and interactive challenges.

Switch It On With Split

The Split Feature Data Platform™ gives you the confidence to move fast without breaking things. Set up feature flags and safely deploy to production, controlling who sees which features and when. Connect every flag to contextual data, so you can know if your features are making things better or worse and act without hesitation. Effortlessly conduct feature experiments like A/B tests without slowing down. Whether you’re looking to increase your releases, to decrease your MTTR, or to ignite your dev team without burning them out–Split is both a feature management platform and partnership to revolutionize the way the work gets done. Switch on a free account today, schedule a demo, or contact us for further questions.