CODEWITHSUNDEEP
javascriptcssreactjsstyled-components
Vettel Hamilton
Vettel Hamilton

Reputation: 142

Difference between className and style-component in React

Why should I use styled-components if having a className against an element does the work of styling?

Applied style :

h2.subTitle{
  font-size: 2em;
  color: blue;
}

Element to be styled using className :

<h2 className="subTitle">Gucci Snakes </h2>

Using styled component :

import styled from 'styled-components';
const Subtitle = styled.h2`
  font-size: 2em;
  color: blue;
`;
<Subtitle>Gucci Snakes</Subtitle>

Upvotes: 0

Views: 1832

Answers (2)

Kuro
Kuro

Reputation: 51

It's used because of readability, classNames might work well, but you don't love them that much when you have 1 or 2 css files with 500 rows, also, the structure of styled components is similar to sass.

For more examples and info you can click here , here and here

Upvotes: 0

sesamechicken
sesamechicken

Reputation: 1981

From the docs,

styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.

This helps with regards to class/style name collision.

https://styled-components.com/docs/basics#motivation

Upvotes: 1

Related Questions