JSX Styling

JSX styling means applying CSS styles to elements written inside JSX.

function App() {

    return (
        <h1 className="title">
            Hello React
        </h1>
    );

}

The title class can be defined in a CSS file.

The most common way to apply a CSS class in JSX is with className.

<div className="container">
    <h1 className="heading">
        React Tutorial
    </h1>
</div>

JSX follows JavaScript property naming conventions. Therefore, React commonly uses className for CSS classes.

// JSX

<div className="card">
    Content
</div>

Do not normally write class as you would in regular HTML.

Create a CSS file inside the src folder.

src/
 |
 +-- App.jsx
 +-- App.css
 +-- main.jsx

You can write CSS rules inside App.css.

.title {
    color: blue;
    font-size: 32px;
    text-align: center;
}

This CSS rule styles elements having the title class.

A CSS file can be imported into a React component.

import "./App.css";

function App() {

    return (
        <h1 className="title">
            Hello React
        </h1>
    );

}

export default App;

Multiple CSS classes can be assigned using a space-separated string.

<div className="card shadow border">
    Student Information
</div>

The element receives all three classes.

React supports inline styles using a JavaScript object.

function App() {

    return (
        <h1
            style={{
                color: "blue",
                fontSize: "30px"
            }}
        >
            React
        </h1>
    );

}

Instead of writing the style object directly, you can store it in a variable.

const headingStyle = {
    color: "green",
    fontSize: "32px"
};

return (
    <h1 style={headingStyle}>
        React Tutorial
    </h1>
);

CSS property names containing hyphens are generally written using camelCase in JavaScript style objects.

const style = {
    backgroundColor: "lightblue",
    fontSize: "24px",
    marginTop: "20px"
};

const style = {
    color: "red"
};

return (
    <p style={style}>
        Red Text
    </p>
);

const style = {
    backgroundColor: "yellow"
};

return (
    <div style={style}>
        Highlighted Content
    </div>
);

Notice that CSS background-color becomes backgroundColor in the JavaScript style object.

const style = {
    fontSize: "28px"
};

return (
    <h2 style={style}>
        Large Heading
    </h2>
);

const style = {
    color: "white",
    backgroundColor: "black",
    padding: "20px",
    textAlign: "center"
};

return (
    <div style={style}>
        React Course
    </div>
);

Some numeric style values can be provided as numbers and React will interpret them as pixel values for properties where appropriate.

const style = {
    fontSize: 24,
    marginTop: 20
};

return (
    <h2 style={style}>
        React
    </h2>
);

When a CSS value needs a specific unit such as percentage, rem, or em, the unit can be included in a string.

const style = {
    width: "50%",
    padding: "2rem",
    fontSize: "1.2rem"
};

Styles can be changed according to JavaScript values.

const isActive = true;

const style = {
    color: isActive ? "green" : "gray"
};

return (
    <p style={style}>
        Student Status
    </p>
);

A CSS class can also be selected dynamically.

const isActive = true;

return (
    <div className={isActive ? "active" : "inactive"}>
        Student
    </div>
);

Conditional expressions can determine which CSS class is applied.

const score = 80;

return (
    <p
        className={
            score >= 40
                ? "pass"
                : "fail"
        }
    >
        Result
    </p>
);

Template literals can be used to combine static and dynamic classes.

const active = true;

return (
    <div
        className={`card ${active ? "active" : ""}`}
    >
        Student Card
    </div>
);

CSS Modules allow styles to be associated with individual components. A common file name is Component.module.css.

src/
 |
 +-- Button.jsx
 +-- Button.module.css

A CSS Module can be imported into a component.

import styles from "./Button.module.css";

function Button() {

    return (
        <button className={styles.button}>
            Click Me
        </button>
    );

}

export default Button;

The CSS Module file can contain a normal CSS class.

/* Button.module.css */

.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
}

The class can then be accessed through the imported styles object.

CSS can style nested elements in the normal way when using a regular CSS file.

.card {
    padding: 20px;
    border: 1px solid #ddd;
}

.card h2 {
    margin-bottom: 10px;
}

.card p {
    color: gray;
}

Pseudo-classes such as :hover are normally handled in a CSS stylesheet rather than directly through a simple inline style object.

.button {
    background-color: blue;
    color: white;
}

.button:hover {
    background-color: darkblue;
}

function StudentCard() {

    return (
        <div className="student-card">

            <h2>Rahul Kumar</h2>

            <p>
                Course: React
            </p>

            <button className="button">
                View Profile
            </button>

        </div>
    );

}

.student-card {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.button {
    padding: 10px 20px;
    cursor: pointer;
}

Different styling methods are useful in different situations.

Regular CSS
    ↓
Reusable global or shared styles

Inline Styles
    ↓
Small dynamic styles

CSS Modules
    ↓
Component-scoped styles

UI Libraries
    ↓
Ready-made components and utilities

• Use meaningful class names.
• Keep reusable styles in CSS files.
• Use inline styles when dynamic values are needed.
• Use CSS Modules when component-level style isolation is useful.
• Avoid putting large amounts of CSS directly inside JSX.
• Keep styling consistent across components.
• Use responsive CSS for different screen sizes.
• Keep component structure and styling easy to understand.

import "./App.css";

function App() {

    const isActive = true;

    return (
        <div className="student-card">

            <h1 className="title">
                Rahul Kumar
            </h1>

            <p
                className={
                    isActive
                        ? "active"
                        : "inactive"
                }
            >
                {isActive
                    ? "Active Student"
                    : "Inactive Student"}
            </p>

            <button className="button">
                View Profile
            </button>

        </div>
    );

}

export default App;

.student-card {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.title {
    margin-bottom: 10px;
}

.active {
    color: green;
}

.inactive {
    color: gray;
}

.button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

function App() {

    const isActive = true;

    const cardStyle = {
        padding: "20px",
        border: "1px solid #ddd",
        borderRadius: "10px",
        width: "300px"
    };

    const titleStyle = {
        color: "blue",
        fontSize: "26px"
    };

    return (
        <div style={cardStyle}>

            <h1 style={titleStyle}>
                React Student
            </h1>

            <p
                style={{
                    color: isActive
                        ? "green"
                        : "gray"
                }}
            >
                {isActive
                    ? "Active Student"
                    : "Inactive Student"}
            </p>

            <button
                style={{
                    backgroundColor: "black",
                    color: "white",
                    padding: "10px 20px",
                    border: "none"
                }}
            >
                View Profile
            </button>

        </div>
    );

}

export default App;

This example combines JSX styling, JavaScript objects, dynamic styles, conditional expressions, and inline CSS.