When you first start using React, you quickly realize it’s not just about writing HTML-like code inside JavaScript — it’s about learning a new way to build, style, and structure your UI.
React uses something called JSX – a syntax that lets you combine JavaScript with HTML elements.
But what about CSS? How do you make your React app look nice?
There are number of ways we can do that
1. Using External CSS Files
If you’ve built web pages before React, you’ve probably written your CSS in a separate css file and connected it to your HTML with a <link> tag.
In React, you can still do something very similar — except now, instead of linking CSS in your HTML, you import it into your component.
Let’s take a simple example:
Example : External CSS File
/* Welcome.js */
import ‘./Welcome.css’;
function Welcome() {
return (
<div className=“welcome-section”>
<h1 className=“main-title”>React</h1>
<p className=“message”>CSS Styling</p>
</div>
);
export default Welcome
/* Welcome.css */
.welcome-section {
text-align: center;
margin-top: 40px;
}
.main-title {
color: blue;
font-size: 2rem;
font-weight: bold;
}
.message {
color: gray;
font-style: italic;
}
/* App.js */
import React from ‘react’;
import Welcome from ‘./Welcome’;
function App() {
return (
<div>
<Welcome />
</div>
);
}
export default App;
Now when this component runs, React looks for a CSS class called ‘.welcome-section’ and applies those style
How does it work:
* You import your CSS file directly into the component using import “./Welcome.css”.
* Instead of class (used in HTML), React uses className. This is because class is a reserved word in JavaScript.
* All the styling works exactly like normal CSS.
The advantages of using external css
* It is very beginner-friendly.
* It keeps structure (JSX) and design (CSS) separate.
* It works well for small and medium projects.
The disadvantages of using external css
* CSS files are global. If two components have the same class name, they might affect each other.
2. Inline Styling
Sometimes you just want to add a quick style — maybe to test how something looks, or style something based on props or state.
In React, you can apply inline styles using the ‘style’ attribute, but the syntax is a bit different from HTML.
Example: Inline Styling
/* Welcome.js */
function Welcome() {
return (
<div style={{ textAlign: “center”, marginTop: “40px” }}>
<h1 style={{ color: “darkorange”, fontSize: “36px”, fontWeight: “bold” }}>
React
</h1>
<p style={{ color: “gray”, fontStyle: “italic” }}>In line Styling</p>
</div>
);
}
export default Welcome
Here’s what’s happening:
1. You wrap your styles in two curly braces:
* The first ‘{}’ tells React, “I’m about to write JavaScript.”
* The second ‘{}’ creates a JavaScript object that holds your CSS properties.
2. CSS property names use camelCase
* font-size ➜ fontSize
* background-color ➜ backgroundColor
3. Each value is a string, like “40px” or “bold”.
So this:
<h1 style={{ color: “darkorange” }}>
is basically the same as writing:
const headingStyle = { color: “darkorange” };
<h1 style={headingStyle}>
The advantages of using inline css
* It is perfect for small, one-off designs.
* It works great when styles depend on props or dynamic data.
* No CSS file is needed.
The disadvantages of using inline css
* You can’t use pseudo-classes like `:hover` or media queries.
* Too many inline styles can make your JSX look cluttered.
3. Using Style Objects
Inline styles are great — but writing them directly inside your JSX can get messy fast.
A cleaner approach is to store all your styles in a JavaScript object variable.
Let’s see that in action.
Example : Using Style Variables
/* Welcome.js */
function Welcome() {
const containerStyle = {
textAlign: “center”,
marginTop: “40px”,
};
const titleStyle = {
color: “mediumseagreen”,
fontSize: “40px”,
fontWeight: “bold”,
};
const subtitleStyle = {
color: “gray”,
fontStyle: “italic”,
};
return (
<div style={containerStyle}>
<h1 style={titleStyle}>React</h1>
<p style={subtitleStyle}>React style object</p>
</div>
);
}
export default Welcome
Now your JSX is clean, readable, and easy to maintain.
The advantages of using style object
* Your styles live close to your component but are still organized.
* You can easily reuse or modify them later.
* Perfect for self-contained UI components.
The disadvantages of using style object
* It can not use pseudo-classes (`:hover`, `:focus`, etc.)
* Not suitable for larger apps
4. Dynamic Styling with Props
You can make your styles change based on props or state.
Let’s say we want our Welcome heading to change color based on a boolean prop called isSpecial.
Example : Dynamic Styling
/* Welcome.js */
function Welcome(props) {
const titleStyle = {
color: props.isSpecial ? “crimson” : “navy”,
fontSize: “36px”,
fontWeight: “bold”,
};
return (
<div style={{ textAlign: “center”, marginTop: “40px” }}>
<h1 style={titleStyle}>{props.title}</h1>
<p style={{ color: “gray”, fontStyle: “italic” }}>{props.subtitle}</p>
</div>
);
}
export default Welcome;
Now, when you render your component in App.js like this:
<Welcome title=”Hello React!” subtitle=”Dynamic Styling in Action” isSpecial={true} />
the heading appears “crimson”
If you pass `isSpecial={false}`, it’ll turn “navy” instead.
The advantages of using dynamic styling
* You can style components dynamically based on logic or user input.
* It helps create truly interactive and reactive designs.
* It keeps logic and style connected — which is perfect for small reusable components.
The disadvantages of using dynamic styling
* Makes the component harder to reuse because styling becomes tightly tied to props.
* Creates cluttered and harder-to-maintain code when too many conditions are used.
* Limits styling capabilities since inline styles don’t support pseudo-classes or media que
5. Using CSS module
Another way of adding styles to your application is to use CSS Modules.
CSS Modules are convenient for components that are placed in separate files.
The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.
Example : CSS Module
/* btn.module.css */
.bgColor {
background: yellow;
}
.redText {
color: navy;
font-size: 22px;
}
.greenText {
color: black;
font-size: 38px;
}
/* App.js */
import styles from ‘./btn.module.css’
function App() {
return (
<div className={styles.bgColor}>
<h1 className={styles.greenText}>React</h1>
<h3 className={styles.redText}>Style with CSS Module</h3>
</div>
)
}
export default App;
Advantages of CSS Modules:
* Keep styles organized and component-specific, improving maintainability.
* Simple to learn since they use plain CSS syntax.
* Reduce unused CSS and improve performance by importing only what’s required.
Disadvantages of CSS Modules:
* Not ideal for global styling or theme-based systems.
* Combining multiple classes can become messy without helper libraries.
* Styling cannot directly depend on JavaScript logic inside CSS.