4 Awesome Benefits of Using Styled Components in Reactjs

4 min read

As a senior react developer in several organizations, I have worked on almost all the CSS frameworks in react projects, from reactstrap to Material UI, SCSS, plain CSS, and styled components. I enjoyed implementing and using styled components.

Once you have started using Styled Components with React, you won’t like to go back to SCSS or other CSS frameworks.

Are you amazed why I love styled components so much?

The benefits of styled components make them worth it. Some of them are:

  1. Hassle-free theme development and maintenance.
  2. No more unmanageable code.
  3. Implement conditional and dynamic styling effortlessly.
  4. No worries about unique class names

1. Theme development and management are easy with styled components

We have to wrap our app in ThemeProvider, provided by styled components, pass our theme object in it, and get via props wherever we want in our app.

theming in styled components

Style components make it so much simple. You can learn more about the themes here.

2. Clean Reactjs component (jsx) with .attrs attribute

We can define all our props in styled component’s style using .attrs attribute, and make our react component jsx clean and manageable.

Example

The following is an example of adding color props to the button via the styled component using .attrs method.

import styled from 'styled-components'
const StyledButton = styled.button.attrs(() => ({
color: 'primary',
}))`
background: ${({ color }) => (color === 'primary' ? '#f5b40d' : '#138496')};
border: none;
outline: none;
border-radius: 8px;
font-weight: 700;
font-size: 14px;
color: #ffffff;
min-width: 200px;
min-height: 36px;
cursor: pointer;
outline: none;
`
const Button = () => {
return <StyledButton>Submit</StyledButton>
}
export default Button

In Button jsx, you will not see the color props, but we have added them via the styled component. You can also add color props dynamically.

Let me prove you by showing a DOM image.

styled components attrs color prop

Here you can read a detailed article about .attrs method and how to use them.

3. Conditional and Dynamic styling is simpler, because props reduce the CSS

As we know we can pass props in styled components this is where the power comes in. In below example, we are discussing how we can write dynamic styles on the basis of props.

In SCSS, to make our code look clean we achieve this functionality using an extra package classnames.

dynamic styling styled components

Further Read

In this article we have talked about how to reuse styled components with examples.

4. Don't have to worry about Unique class names and overlapping styles

Unlike other CSS frameworks, I don’t have to worry about giving a unique class name to a parent element, overlap styling, and misspellings, styled components handle it for me behind the scene.

import styled, { ThemeProvider } from 'styled-components'
import { device } from './styles/BreakPoints'
import { GlobalStyles } from './styles/Global'
import { theme } from './styles/Theme'
const Title = styled.h1`
color: ${(props) => props.theme.colors.primaryTextColor};
font-size: 48px;
@media ${device.md} {
font-size: 32px;
}
`
const P100 = styled.h1`
font-size: 10px;
font-weight: 100;
color: ${({ theme }) => theme.colors.secondaryTextColor};
`
const H2 = styled.h2`
font-size: 36px;
font-weight: 700;
color: ${({ theme }) => theme.colors.secondaryTextColor};
`
function App() {
return (
<ThemeProvider theme={theme}>
<GlobalStyles />
<Title>Hello World!</Title>
<>
<P100>100 The quick brown fox jumps over the lazy dog</P100>
<H2>700 The quick brown fox jumps over the lazy dog</H2>
</>
</ThemeProvider>
)
}
export default App

In this DOM image you can see styled components assign a unique class name to each element or each style.

styled components unique class names

Conclusion

Styled components have much more to discover. They are reusable, manageable, clean, and much more. Start experimenting with it, and you will know the other benefits of styled components. You can also begin with my blogs. Don’t wait, get into it, and Happy Learning!