Building web apps with React is not just about composing components together and making sure that the logic works correctly. That arguably is the most important part, where at least it's the biggest reason for using React. But building react apps is also about styling those apps.
We want to make sure that our web applications look good and styling is also an important part of building components.
Styled-components is a CSS-in-JS styling library that uses tagged template literals in JavaScript and CSS rules to provide pre-styled components where the styling is scoped to that react component only.
The button as a JavaScript variable and the styles defined in backticks are plain old CSS styles. We can also see the nested style property with plain CSS styles.
This is how styled-components renders CSS in JavaScript.
Styling React components
There are primarly two ways to style a React component.
Inline Styling
const style = {
color: 'blue',
};
function App() {
return <div style={style}>Hello World!</div>;
}
Inline styling has one of the highest specificity value which will override any other CSS rule. This method is highly discouraged, as it is neither sustainable nor scalable.
External Styling
There’s this more traditional way of using CSS in external CSS files, which is then passed as a string to the className prop
return (
<div className="red-text"> some text </span>
)
As the component tree grows, CSS files begin to get bulky, clumsy, and complex. One great alternative solution to this is the usage of SASS. Although SASS helps, you’ll eventually deal with the same issue due to the sheer number of SCSS files a project can have.
Finally, CSS-in-JS is a technique where JavaScript is used to style components. When this JavaScript is parsed by the browser, CSS is generated as a style element and attached inside <head></head> of the HTML document.
Why should you use Styled-Components
- You have freedom to build custom pre-styled components. You no longer need to keep switching between a JS file and a CSS file but you can build your styled react components in one go.
const Button = styled.button`
display: inline-block;
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
display: block;
`;
return (
<div>
<Button>Normal Button</Button>
</div>
);
No class name bugs. styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
Use Power of Sass. When using styled-components you can easily use SASS like features like nesting.
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.
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.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 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.
Will it cost you performance ?
If you are not using native CSS inline styles, there is always a possibility of having some performance overhead with any open source library you choose to use for styling. However, the little performance overhead you get is the price you pay for the power and flexibility you get from styled-components.
The good thing is that styled-components is focused on improving the library’s performance on every new release. It keeps getting better.
Conclusion
Styled-components has a rapidly increasing community, with over 33,000 members on GitHub, which is highly encouraging and testifies to the project's long-term viability. It just keep getting better.
Happy coding!
Top comments (4)
Nice post. Have you ever tried Tailwind?
I am asking because I am also coming from the styled components and NextJS module styles corner. But seriously Tailwind blew me away.
I makes it very easy to follow a consistent layout and the bundle size of the resulting css is extremely low.
Was that pun intended? xD
actually not :D
Kinda similar to how I do things, except I just translate javascript objects into CSS:
But that difference mostly comes down to personal preference.