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:

xxxxxxxxxx

.border {

    border: dashed;

    border-color: red;

}

​

.background {

    background-color: greenyellow;

}

App.jsx file:

xxxxxxxxxx

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: