React - multiple classNames in one element

In this article we would like to show you how to add multiple classNames to one element in React.

Below example shows two CSS styles: .border and .background.
We add both styles to the div by using className property with space between the classNames.

App.css file:

.border {
    border: dashed;
    border-color: red;
}

.background {
    background-color: greenyellow;
}

App.jsx file:

import React from 'react';
import './App.css';

const App = () => {
    return (
      <div className="background border">
        My div
      </div>
    );
};

Note:
Styles can be placed in two separate files, we just need to import both of them and add styles with the same method.

Browser output: