Let’s say you need to create different elements that have similar style attributes but not the same. Traditional way to do this in CSS is to create a class and give that class to your elements. Then you create different classes, for the different attributes.
It will look like the example below;
styles.css
.box {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border: 2px solid green;
border-radius: 6px;
}
.first-box {
color: red;
}
.second-box {
color: blue;
}
component.tsx
import React, { Component } from 'react';
import './styles.css';
class Component extends Component {
render() {
return (
<div>
<div className="box first-box">
<span>first box</span>
</div>
<div className="box second-box">
<span>second box</span>
</div>
</div>
);
}
}