Styled Components: The future of styling React Components

Sameer Dewan
6 min readFeb 17, 2021

For years, React developers have imported stylesheets into their .js or .jsx files. Simple and standard enough a practice, right?

This is a simple enough bootstrapped create-react-app generated App.js file. In theory, a project that looks like this, does not look as intimidating to work with. Heck, what’s wrong with using declarative semantic html elements and classnames to decorate them with CSS in this scenario?

Obviously, our applications are never this simple.

The following expands on why I heavily advocate for the use of styled components.

Localize Component Styles

As your React app grows, so do the need for stylesheets to style the components which comprise it. A project that has a handful of stylesheets is okay to maintain if you are working alone. Even so, in a group based effort, a handful of stylesheets is workable.

But what happens as the need for stylesheets grow and grow?

We end up creating more classnames and compounded classnames that are used in conjunction to style elements conditionally based on component state. Sometimes, we use libraries like material, and we need to override the style of a component (i.e. Card).

Material UI Component Library: Card

We could target the material Card’s class name MuiPaper-root and apply the style on top using !important. But the question arises… if we need the un-customized component elsewhere in a child component to the parent component importing this overrode style, how do we then make sure we get the original component, untouched by our own CSS?

A look at the DevTools for the class to target styling for the Card Component

We have all at some point dealt with styles overriding each other in the wrong places at the wrong time, band-aiding the issue with more classnames as an identifier, further making our CSS files larger.

TLDR: We need our component styles to be manageable for other developers, understandable at a glance, and localized to where we need them.

Styling material’s Card Component
Retaining the original Card Component’s styling

In the above example, using styled, we are able to style the targeted attribute within the Card component and localize that style. The original Card component was left unaltered, as intended.

Can you imagine if we styled the MuiPaper-root classname within a CSS file and imported it at the top level?

A work-around to using styled would be the typical route of adding a classname attribute to the Card component to style it. This works fine, but in reality, not all components out there you may use allow for classnames to be inherited. And even so, would you rather populate your CSS with a bunch of classnames for every component variation possible, or make clearly defined components that are reusable with localized styles?

Choice is yours!

Component State-to-Style Cohesion

As our component state changes, our component styles need to change sometimes as well. An example of this could be a user registration form, that when the length of the username or password is less than 3 characters, the input is highlighted red, otherwise, it is highlighted green.

Demo of desired behavior

Pretty basic behavior we’d want in any of our apps (as ugly as the implementation above is). To achieve this, we could optionally apply a classname to the input as the state for the value is updated. Perhaps we could even use the inline style prop on an input and apply that ternary style set there.

Is there a better way? I’d propose the following is much cleaner and easier to work with.

Using styled components to accomplish our goals

Within a styled component, we can access any of the props passed to the component wherever it is used. I’d like you to take a moment to imagine a complicated (style-wise) component that has multiple facets of it needing to react to different props passed to it. By using a styled component, we can create a clean separation of the component’s style and its’ logic.

TLDR: Let the component instance work, and the styled class handle what needs to happen stylistically.

Isn’t that better than optionally applying classnames or working within the styles prop directly?

React Native Compatibility

This is a rather short reason to start using styled — it’s usable with React Native as well!

That good old adage of “Learn once, write anywhere” with React and React Native can be expanded to the stylistic aspect of your applications as well using styled.

Built in Sass

So you love Sass, huh? Good news, styled supports Sass. You may have noticed in the first example where we styled the Card component from material, I used Sass syntax to select the MuiPaper-root classname within the component to directly target my styles to.

The perfect CSS-in-JS experience is here. Let’s see another example!

Using :focus and :hover selectors
Using Sass selectors within the StyledInput

We can take advantage of all the cool things Sass has to offer us in house to styled. Pretty neat, huh?

But what about Global CSS Variables?

So you say we can use Sass within our styled-components, but what about using good old global variables? Since styled allows for isolated components, what about those global reusable colors, icons, fonts, etc.?

Fear not. Contrary to what this article would have you believe, you don’t need to throw away stylesheets imported completely after all.

Let’s edit the App.css file here I have:

Adding a root level variable for a theoretical brand color
Utilizing the variable within a styled component

The result of this is the following:

By checking the styled h1 in our developer console, we can see the successfully applied CSS variable.

This would be a good time to mention as well that styled manages the classnames internally to itself that get rendered, to avoid conflicting classnames.

In Conclusion…

This is an awesome tool to utilize in your React apps, both native and web based. I did not go over the syntax here much beyond examples, but I’ll post an article in the future to do so. For the time being, you can visit https://styled-components.com/ for learning!

Happy styling, friends.

--

--