Normally big projects need it to be dynamic or having different reusable CSS classes which can be applied to multiple DOM elements, also there are some common CSS in two classes which can be separated as one common class and then apply multiple class to element where one is common CSS and one is element specific class. Here the need for multiple classes to a single element raises. Also, you can check about implementing material UI in React which is one of the demanding topic in React.
While working with HTML and CSS we encounter some situations where we need to apply more than one class to an element, i.e., applying one class for media queries and one class for color, size and position to a div tag. Moreover, you can hire React developers from BOSC Tech Labs to help you in applying these things and in building complex React based application efficiently and correctly.
For above situation, we just write both the classes space separated to HTML element:
| @media (max-width: 767px) { .hidden-mobile { display: none; } } .theme-format { color: ‘blue’; font-size: 16px; } <div class=”hidden-mobile theme-format”>SOME WEB CONTENT</div> |
Now, as we already know that React application is having Class component and Functional component. So the keyword Class is already there for class component in React, due to this we need to use className to tell React that the className is different from class and className needs to be rendered inside an HTML tag as CSS class.
Now to apply multiple classes we can just use space similar to HTML, i.e.,
| function App() { return <div className=”class1 class2″>Normal Multiple Classes</div> } export default App |
Ways to apply multiple classes to React DOM element
Static Classes:
As we have already seen above that is what static classes looks like, there are few more ways to apply static classes like:
Static class with variable and then concatenation:
| const varClass = “class1” <div className={varClass + ” ” + “class2”}>Normal Multiple Classes</div> // Or <div className={“class2 “.concat(varClass)}>Normal Multiple Classes</div> |
Similarly, we can apply classes combined as array and then join it with space:
| const arrClass = [“class1”, “class2”, “class3”] <div className={arrClass.join(“ “)}>Multiple Classes in array</div> |
Dynamic Classes:
Above classes are directly or indirectly static classes, but there are few ways to add this classes dynamically. It can be with some condition or from parent component or even from response from API.
Conditional classes are a widely used method as it gives applications a different level of dynamicity from a front-end UI/UX perspective.
| const [isWarning] = useState(true) return ( <> <div className={`box ${isWarning === true ? “warning” : “success”}`}> This is a message </div> </> ) |
Here the CSS can be:
| .warning { color: ‘red’, } .success { color: ‘green’, } |
Classes as props from parent component:
| const Child = props => { return <div className={`${props.status}`}>This is an error message</div> } function App() { return <Child statusClass=”error” /> } export default App |
Here the Child will get error as class given to that div element.
Using classNames Library:
All the methods above directly or indirectly forces us to use space separated classes, but the classNames library of React offers comma separated class applying method.
Firstly install the library to your project by npm or yarn:
| npm install classnames //Or yarn add classnames |
Now we can use it with all the above Static and dynamic methods but here the comma separation is needed instead of the space separation we used in above examples i.e.,
| import classNames from “classnames” import { useState } from “react” function App() { const [isWarning] = useState(true) return ( <div className={classNames(“box”, { warning: isWarning })}> This is a warning message </div> ) } export default App |
Here we applied two classes comma separated, where one is Static, and the other one is conditional on one variable.
Conclusion
Examples above shows that similar to normal HTML space separated multiple classes, we can apply multiple classes to React DOM element the same way with some additional possibilities like classes in array, variable or even from another component’s props. There is one library which allows adding classes, just separating it with comma as well.
By all the above ways there are endless possibilities of giving multiple classes statically or dynamically according to need and solving the needs of big projects.
