How to Apply Conditional Styles in React
React is a popular front-end framework because it gives you the freedom to build beautiful, responsive UI. Styling is one of the most important aspects of this process.
In this article, we want to show multiple ways to apply conditional styles in React.
Conditional Styles in React
The library allows you to store user inputs as values and apply conditional styles depending on the user’s overall actions and input.
Apply Inline Conditional Styles in JSX
The first and obvious way is to define inline styles. Unlike HTML, inline styles in JSX are valid JavaScript.
For this reason, you are free to use ternary operators to set up a condition to determine the value of a certain style. For example, you can do the following:
export default function App() {
let danger = true;
return (<div className = 'App'><h1 style = {
{
color: danger ? 'red' : 'green'
}
}>Some Text</h1>
</div>);
}
This translates into: if the value of the danger
variable is true, then the color
CSS property must have the value of red
. If not, then it will be green
.
You can define style objects outside the JSX, as well as inside it. You must use double curly braces if you apply styles directly as you invoke the component.
You need the first pair of curly braces to tell JSX that the content inside it is a JavaScript expression. You need the second pair as opening and closing tags for an object in JavaScript.
Here is how to define the style
object outside JSX and only reference it in the JSX:
export default function App() {
let danger = true;
let inlineStyle = { color: danger ? "red" : "green" };
return (
<div className="App">
<h1 style={inlineStyle}>Some Text</h1>
</div>
);
}
This is a more readable approach to defining inline styles for some people. Go to CodeSandbox to check the live demo.
Apply Conditional Classes in React
Some people prefer to apply classes rather than inline styles. The principle is the same.
We use ternary operators to generate a dynamic class name. You can go even further and provide three options:
export default function App() {
let danger = false
let warning = true
return (
<div className="App">
<h1 className={danger? 'dangerText': warning ? : 'warningText' : 'regularText'}>Some Text</h1>
</div>
);
}
In this case, we check if the danger
variable is true.
If it is, we apply the dangerText
class. If not, we again check if the warning
variable is true.
If it is, we apply the warningText
class. If not, we apply regularText
.
Note that we use the className
attribute to apply classes to elements in JSX.
Conditionally applying classes instead of inline styles gives you more freedom to customize the appearance of elements using CSS.
Use Template Literals to Conditionally Apply Classes in React
You can also use template literals to apply the value of a variable as a class name. Then you can dynamically change the value of the variable.
You can combine static and dynamic class names as well. Let’s take a look at the example:
export default function App() {
let danger = false
let warning = true
return (
<div className="App">
<h1 classNamme={`large ${errorNotification}`}>Some Text</h1>
</div>
);
}
If the errorNotification
variable contains a value warning
, then the className
attribute will have two values, large
and warning
.
Use the classnames
Package to Conditionally Apply Classes in React
Finally, many people use an external package called classnames
to apply classes in React dynamically.
The classnames()
function accepts an object with potential class names as properties and conditions for applying them as values. Let’s take a look:
export default function App() {
let danger = false
let warning = true
return (
<div className="App">
<h1 className={classNames({warningText: error})}>Some Text</h1>
</div>
);
}
Read the official docs to learn more about the package’s functionality.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn