Conditionally setting styles in React is essential if you want to manipulate styling based on conditions. How to do it? Let’s go into detail now.
Conditionally setting styles in React
Solution 1: Use in a usual way
First of all, let’s understand what conditionally style is. It simply will change CSS style based on conditions. For example, when you click the button and make whole paragraphs disappear set conditions when the user’s age exceeds 18, the name’s color will turn green. If not will be red, let’s go into code examples.
Example:
import { React, useState } from "react";
import "./App.css"
function App() {
const [person,setPerson]= useState({name:'Togban',age:18,country:'VietNam'})
const [showPerson,setShowPerson]= useState(true)
const handleBtn = ()=>{
setShowPerson(!showPerson)
}
return (
<div className="main">
<button onClick={handleBtn}>Click Me</button>
<h1 style={{color:`${showPerson?'blue':'black'}`}}>Infor</h1>
<ul style={{opacity:`${showPerson?1:0}`}}>
<li>Name:{person.name}</li>
<li>Age:{person.age}</li>
<li>Country:{person.country}</li>
</ul>
</div>
);
};
export default App;
Output while not clicking the button yet:

When clicking button:

Here I create a showPerson useState like a flag to control the time person infor should show. Then with the click me button, I add an event handleBtn every time I click on the button, it will reverse set the showPerson. Then I set the opacity CSS property and color CSS property to depend on what the value of showPerson is. If it is true, the opacity will be set to 1, and the color will be blue. If false, opacity and color will be 0 and black. That is how conditional style works. It depends on the conditional, which here is showPerson, and will change CSS based on the condition and what we set it to show.
Solution 2: Use styled-component
This is library support react, so you will have to download it by npm by this command.
npm install –save styled-components
Then we will have to import it into our file, and now we can work with it. I will show you a simple example of the way we can combine styled-components with conditional styling.
Example:
import { React, useState } from "react";
import styled from "styled-components";
import "./App.css"
function App() {
const [person,setPerson]= useState({name:'Togban',age:18,country:'VietNam'})
const [showPerson,setShowPerson]= useState(true)
const handleBtn = ()=>{
setShowPerson(!showPerson)
}
const StyledUl = styled.ul`
opacity:${showPerson?1:0}`
const StyledH1 = styled.h1`
color:${showPerson?'blue':'black'}
`
return (
<div className="main">
<button onClick={handleBtn}>Click Me</button>
<StyledH1>Infor</StyledH1>
<StyledUl>
<li>Name:{person.name}</li>
<li>Age:{person.age}</li>
<li>Country:{person.country}</li>
</StyledUl>
</div>
);
};
export default App;
Output before click button:

Output after click button:

It works just like I showed you, but instead of passing style to style property, I create an element that already has that style.
Summary
In this tutorial, I gave you the guide on conditionally setting styles in React. You can create your logic and set your CSS style to follow that logic by the ternary operator or if/else statement. If you have any questions, please comment below. Thank you for reading!
Maybe you are interested:
- Create a Numbers only Input field in React.js
- draw a horizontal line in React
- Get the Height of an Element using a Ref in React

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm