CSS-in-JS libraries, like styled-components, have become more popular in recent years.
They encapsulate CSS down to the component level and allow you to use JavaScript to define reusable styles.
Using styled-components, you’re free to maintain the component-driven architecture that React already reinforces.
But the library has some downsides too.
How Styled Components Work
Thestyled-componentsCSS-in-JS library allows you to write CSS inside your component files.
Its syntax is the same as CSS, so it’s pretty easy to pick up.
It’s a perfect middle ground for JavaScript developers who tend to stay away from pure CSS.
To see how it works, consider the following Title component that renders an h1 element.
it’s possible for you to use this component like any other React component.
It’s also very powerful because it makes it easier to work with props and state.
For instance, the color and background of this component depend on the props.
With styled components, you don’t need to manually pass the props to the CSS.
It is automatically available, simplifying writing styles that depend on data from the component.
Pros of Using Styled Components
Here are some advantages of using the styled-components library.
It Solves CSS Specificity Problems
Styled components eliminate specificity problems as it encapsulates CSS inside a component.
So, you don’t need to create a separate CSS file or keep switching from file to file.
Other than that, writing CSS inside components.
It makes it easier to share props and states with styles.
For example, you’re free to rewrite the button component above using TypeScript.
Using TypeScript in the componentmeans checking punch in errors as you code and reducing debugging time.
However, Styled components simplify the process.
you could add themes to your app by exporting a wrapper component.
The ThemeProvider component passes the themes to all the styled components it wraps.
These components can then use the theme values in their styles.
In this example, the button uses the theme values for the background and font colors.
This is time-consuming and costly.
UsingCSS modulesor a framework independent library like emotion is more future-proof.
In this example, the header component could use an h1 tag.
it’s possible for you to take this further by defining the styled components in another file (e.g.
styled.js), which you’ve got the option to later import into a React component.
Doing this gives you a clear view of which components are styled and which are React components.
This causes performance issues because the user must download a lot of JavaScript in the initial load.
Static CSS is much faster.
It doesn’t need to be processed before the web client uses it to style pages.
However, the styled-components library is improving with every release.
If you’ve got the option to afford some reduced performance, go ahead and use it.
If you prefer writing pure CSS, use CSS modules.
you’re free to have separate CSS files, and it locally scopes styles by default.
Regardless of what choice you make, having solid CSS knowledge is essential.
