The Devil Uses styled-components
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.
You get all of these benefits while still writing the CSS you know and love, just bound to individual components.
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:
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:
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:
Now let’s extend some styling to that button so that it changes size:
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.
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!
