The Devil Uses styled-components

Image for post
Image for post
Photo by Pankaj Patel on Unsplash

Terrible Devil Wears Prada reference aside, I’m almost certain you’ve heard of styled-components for React. Using it eliminates the need for tracking dozens of class names to styles with basic CSS. As a result, it is pretty intuitive to style React components and keep them lightweight and efficient.

Check out some of the benefits of styled-components courtesy of its documentation:

  • Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
  • No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
  • Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
  • Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
  • Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
  • Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

To Start Off…

Run npm install or yarn add with styled-components. In a few moments, your app will have the ability to use styled-components.

Literally Template Literals

styled-components can be tricky if you aren’t familiar with template literals, (“string literals allowing embedded expressions” according to MDN). It looks something like this:

Image for post
Image for post

No additional CSS style sheet necessary!

Give Props Where Props Are Due

Since styled components are React components. Below you’ll see a styled button that changes up based on the bg prop that’s passed to it:

Image for post
Image for post

One pretty useful feature of styled-components is that it recognizes the props passed to it. In the above example, StyledButton understands the difference between bg as a prop and type as a prop. The former is a user-made piece of data and the latter is an HTML attribute, essentially instructing the DOM to render <button type=”button”>Button A</button>. Cool, huh?

No Duplication Over Here!

When playing around with styled-components, you’ll quickly realize that you’ll be tempted to create multiple style components of the same type with mostly similar properties. (A button whose background color changes, for example.) Luckily, styled-components can extend styles. Case in point: check out this button below:

Image for post
Image for post

Now let’s extend some styling to that button so that it changes size:

Image for post
Image for post

The only that changes in what’s rendered is the size of the padding. Everything else about StyledContainer stays that same. Handy.

AS IF

One aspect of styled-components I find really interesting is the polymorphic as prop. Passed to a styled component after the return in the render function, it allows the component’s HTML element type to be changed.

Image for post
Image for post

Now StyledSmallContainer will be a <div> instead of a <section>.

This just scratches the surface of what styled-components can do but everything covered in this article should be helpful to wide array of coders just starting out with it. Happy coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store