Table of Contents
You might have come across scenarios where you would want to add multiple CSS classes to an HTML element based on some condition. In this tutorial, we will see different ways of adding multiple CSS classes in React.
Setting up the project
Create a new react app using the following command:
1npx create-react-app react-multiple-class
Update index.css
with the following styles, which will be used in demonstrating how to use multiple classes:
1body {2 margin: 10px auto;3 max-width: 800px;4}56.box {7 border: 1px solid;8 border-radius: 5px;9 padding: 1rem;10 margin: 0.5rem;11}1213.success {14 color: #0f5132;15 background-color: #d1e7dd;16 border-color: #badbcc;17}1819.error {20 color: #842029;21 background-color: #f8d7da;22 border-color: #f5c2c7;23}2425.warning {26 color: #664d03;27 background-color: #fff3cd;28 border-color: #ffecb5;29}
Adding classes statically
Adding classes statically is straightforward and is the same as how we add them in HTML.
Update the App.js
component as shown below:
1function App() {2 return <div className="box success">This is a success message</div>3}45export default App
If you run the application now, you should be able to see that both the classes 'box' and 'success' applied.
Adding classes dynamically
Most of the time you would want to add a class dynamically based on some condition. There are multiple ways in which this can be achieved:
Using String Interpolation (Template Literals)
Template strings can be used when you need to evaluate certain expressions and output the result:
1import { useState } from "react"23function App() {4 const [isWarning] = useState(true)5 return (6 <>7 <div className="box success">This is a success message</div>8 <div className={`box ${isWarning === true && "warning"}`}>9 This is a warning message10 </div>11 </>12 )13}1415export default App
In the above example, warning class will be added only when the isWarning
state is true.
Alternatively, we could write this as box ${isWarning && "warning"}
as we don't need to explicitly check since isWarning
is boolean.
Using props from the parent component
We can use the props passed from the parent component and use it in providing the class name:
1const ChildComp = props => {2 return <div className={`box ${props.status}`}>This is an error message</div>3}45function App() {6 return <ChildComp status="error" />7}89export default App
Using classnames library
There is a handy library named classnames, which can be used if there are many classes and complex conditions.
First, let's install the package in our project using the following command:
1yarn add classnames
Now use it in the App.js
as follows:
1import classNames from "classnames"2import { useState } from "react"34function App() {5 const [isWarning] = useState(true)6 return (7 <div className={classNames("box", { warning: isWarning })}>8 This is a warning message9 </div>10 )11}1213export default App
Here since the value of isWarning
is true, the 'warning' class will be added to the div.
Classnames library can take a lot of arguments as shown below:
1classNames("foo", { bar: true, duck: false }, "baz", { quux: true }) // => 'foo bar baz quux'
Source code
You can view the source code here.
If you have liked article, stay in touch with me by following me on twitter.
Leave a Comment