In this article , we are going to learn how can we intergrate styled-components in our React Applications .

Overview –

styled-components is the result of wondering how we could enhance CSS for styling React component systems. By focusing on a single use case we managed to optimize the experience for developers as well as the output for end users.

With the advent of modern component-based frontend frameworks, the need to write CSS that is scoped to a particular component has increased. And as with most problems in the frontend sphere, a variety of solutions have sprung up to address it .

Why Styled Components ?

• 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.
• 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.
• No class name bugs – styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.
• 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.

Installation –

To install styled-components you need to run only a single command in your terminal .

Getting Started –

The styled API allows us to create a StyledComponent — a component with styles, as the name implies — by using either a regular HTML element or another StyledComponent as a base.

Let’s take a look at the first method. If we want to make a styled div element and a styled <h1> element into React components, we can simply write:

And with that, we have two React components that we can now use as regular components:

Dynamic Styling using React Props – 

Another powerful feature of styled-components is its ability to alter a component’s styles using props.

Based on the primary prop being passed on or not we are swapping its background and color of the text.

Additional styling methods with the attrs constructor – 

styled-components also allows additional props or HTML attributes to be added to a component using the attrs method. Using attrs, we can define static props or attributes like the type of an <input> element as well as dynamic props. Here’s an example of the attrs method in use:

In the above code, we attached an href attribute to our <Link> component, whose underlying HTML element was an anchor element. The value passed to the href element was received from the transient prop, $to, of our <Link> component.

Transient props are a feature in styled-components that allow us to use props that will not show up on the DOM. So if you inspect our Link component, you will notice that it was rendered as simply:

Theming React apps with styled-components –

styled-components also supports theming through the use of a ThemeProvider component. We can pass a theme prop to the <ThemeProvider>, and this theme will be passed to all the children of the <ThemeProvider> as a prop.

We can now choose to dynamically style those child components based on the value of the theme prop. Here’s a simple example to show how this works:

Animations –

CSS animations with @keyframes aren’t scoped to a single component but you still don’t want them to be global to avoid name collisions. This is why we export a keyframes helper which will generate a unique instance that you can use throughout your app:

Conclusion –

We’ve finally covered what I believe to be the most important and frequently used parts of the styled-components library. You can learn more about the library in the comprehensive documentation here.