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;


.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;
Enter fullscreen mode

Exit fullscreen mode


import React, { Component } from 'react';
import './styles.css';

class Component extends Component {
  render() {
    return (
        <div className="box first-box">
          <span>first box</span>
        <div className="box second-box">
          <span>second box</span>


Source link