Languages
[Edit]
EN

React - multiple classNames in one element

0 points
Created by:
Dirask Community
3930

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:

Two CSS styles in one element
Multiple className example in React
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join