In React, styling your components is one of the first things you’ll need to master to build a professional-looking application.
During my eight years of working with React, I’ve seen many developers get confused because they try to use the standard HTML class attribute.
In React, we use className because class is a reserved keyword in JavaScript, and since JSX is an extension of JavaScript, we have to follow this rule.
In this tutorial, I will show you exactly how to add class names to your React components using several different methods that I use in my daily production work.
Method 1: Adding a Simple String ClassName
The simple way to add a class is by passing a string to the className attribute.
I usually use this for static elements that don’t need to change their appearance based on state.
Imagine we are building a dashboard for a New York City real estate platform. We might want a header that always stays the same.
import React from 'react';
import './App.css';
const RealEstateHeader = () => {
return (
<div className="nyc-header-container">
<h1 className="main-title">Manhattan Luxury Listings</h1>
<p className="subtitle">Find your dream home in the Big Apple</p>
</div>
);
};
export default RealEstateHeader;You can refer to the screenshot below to see the output.
In your CSS file, you would simply define .nyc-header-container just like you would in a normal web project.
Method 2: Add Multiple ClassNames Using Template Literals
Quite often, you need to apply more than one class to a single element.
In my experience, using ES6 template literals is the cleanest way to combine multiple strings without messy concatenation.
Let’s say we are styling a “Buy” button for a Tesla dealership website in California. We want a base button style and a specific color style.
import React from 'react';
const OrderButton = () => {
const baseClass = "btn-global";
const themeClass = "btn-electric-blue";
return (
<button className={`${baseClass} ${themeClass} shadow-lg`}>
Reserve Your Model S
</button>
);
};
export default OrderButton;You can refer to the screenshot below to see the output.
This method is great because it allows you to inject variables directly into the class string while keeping the code readable.
Method 3: Conditional ClassNames with Ternary Operators
In real-world apps, classes often depend on the state. For example, a “Submit” button might change color if the form is valid.
I frequently use ternary operators for simple “either-or” styling logic.
Suppose we are building a flight status tracker for Delta Airlines at Hartsfield-Jackson Atlanta International Airport.
import React, { useState } from 'react';
const FlightStatus = () => {
const [onTime, setOnTime] = useState(true);
return (
<div className="status-card">
<h2>Flight DL1234 to LAX</h2>
<span className={onTime ? "text-green-success" : "text-red-alert"}>
{onTime ? "On Time" : "Delayed"}
</span>
<button onClick={() => setOnTime(!onTime)}>
Toggle Status
</button>
</div>
);
};
export default FlightStatus;You can refer to the screenshot below to see the output.
This ensures that the user gets immediate visual feedback based on the flight data.
Method 4: Use the Logical AND (&&) Operator
Sometimes you only want to add a class if a specific condition is true, and do nothing if it is false.
I find the && operator very useful for adding “active” or “disabled” states to navigation links or buttons.
Let’s look at a “Tip Percentage” selector for a restaurant POS system in Chicago.
import React, { useState } from 'react';
const TipSelector = () => {
const [selectedTip, setSelectedTip] = useState(15);
const tips = [15, 18, 20, 25];
return (
<div className="tip-container">
<h3>Select Tip Amount</h3>
{tips.map((amount) => (
<button
key={amount}
onClick={() => setSelectedTip(amount)}
className={`tip-btn ${selectedTip === amount && 'is-selected'}`}
>
{amount}%
</button>
))}
</div>
);
};
export default TipSelector;Note that if the condition is false, React might render false as a string in the class attribute. To avoid this, I usually prefer Method 5 for complex logic.
Method 5: Handle Complex Logic with an Array and Join
When I have three or four different conditions affecting a single element, template literals can become hard to read.
In these cases, I push my classes into an array and join them with a space at the end.
Imagine a stock market ticker for the NASDAQ where the styling changes based on price movement and user watchlists.
import React from 'react';
const StockRow = ({ symbol, priceChange, isWatched }) => {
const classes = ["stock-item"];
if (priceChange > 0) {
classes.push("trend-up");
} else {
classes.push("trend-down");
}
if (isWatched) {
classes.push("highlight-gold");
}
return (
<div className={classes.join(" ")}>
<span>{symbol}</span>
<span>{priceChange}%</span>
</div>
);
};
export default StockRow;This approach keeps your JSX clean and moves the logic into the component body where it belongs.
Method 6: Use the CLSX or Classnames Library
If you are working on a large-scale project, manually joining strings can become tedious and error-prone.
In my professional projects, I almost always use a utility library like clsx or classnames.
These libraries allow you to pass objects where the key is the class name and the value is a boolean.
import React from 'react';
import clsx from 'clsx';
const CreditCardField = ({ isValid, isFocused, isExpired }) => {
// This automatically handles spaces and falsy values
const inputClasses = clsx('form-input', {
'border-red-500': !isValid,
'ring-2 ring-blue-400': isFocused,
'opacity-50': isExpired
});
return (
<div className="us-bank-form">
<label>Credit Card Number</label>
<input className={inputClasses} type="text" placeholder="XXXX XXXX XXXX XXXX" />
</div>
);
};
export default CreditCardField;This is the industry standard for managing dynamic classes in React because it handles all the “edge cases” for you.
Pass ClassName as a Prop
A common pattern I use is creating “Wrapper” components that accept a className prop from their parent.
This makes your components highly reusable across different parts of your application.
import React from 'react';
const CustomContainer = ({ children, className }) => {
return (
<div className={`base-container-style ${className}`}>
{children}
</div>
);
};
// Usage
const App = () => {
return (
<CustomContainer className="mt-10 p-5 bg-usa-flag-colors">
<h1>Welcome to the National Park Service Portal</h1>
</CustomContainer>
);
};
export default App;By doing this, the parent component can control the layout (like margins or padding) while the child component maintains its core internal styles.
Common Mistakes to Avoid
In my years of debugging React code, I see the same two mistakes over and over again.
First, forgetting that className is case-sensitive. If you write classname (all lowercase), React will ignore it, and your styles won’t show up.
Second, putting a space at the beginning of a string inside a template literal when it isn’t needed, or forgetting a space between two joined classes.
Always check your browser’s “Inspect Element” tool to see what the final string in the class attribute looks like.
Adding classes in React is quite simple once you get used to the JSX syntax.
I’ve covered everything from basic strings to professional libraries like clsx. Depending on the complexity of your US-based web project, you can choose the method that fits best.
You may read:
- How to Convert React Class Components to Functional Components
- How to Modularize React Components
- How to Disable React Strict Mode for One Component
- React PureComponent vs Component
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
