Conditional CSS in React using ternary operators in CSS

Understanding Conditional CSS in React

Conditional CSS is a way to change styles based on certain conditions, like the value of a variable. This can help make your application more dynamic and responsive to user inputs. In this lecture, we will explore different methods of applying conditional CSS in React components with practical examples!

Method 1: Ternary Operator with Inline CSS

In this method, we use a ternary operator to determine which style to apply based on a condition. Let's say we want to change the background color of a message based on age:


// Method 1
const ConditionalCss = () => {
	 const age = 20;
    // Define styles for different conditions
    const greenStyle = {
        backgroundColor: "green",
        color: "#fff",
    };
    const redStyle = {
        backgroundColor: "orange",
        color: "#000",
    };

    return (
        // Apply conditional style using ternary operator
        <p style={age >= 18 ? greenStyle : redStyle}>
           Your Age is: {age}
        </p>
    );
}

export default ConditionalCss;

In this example, if the age is 18 or more, the background color will be green; otherwise, it will be orange. This way, we dynamically change the style based on the condition.

Method 2: Using a Variable for Style

Instead of applying the conditional logic directly in the JSX, we can store the selected style in a variable and then use that variable. This makes our code cleaner:


// Method 2
const ConditionalCss = () => {
    const age = 20;
    // Define styles for different conditions
    const greenStyle = {
        backgroundColor: "green",
        color: "#fff",
    };
    const redStyle = {
        backgroundColor: "orange",
        color: "#000",
    };
    const style = age >= 18 ? greenStyle : redStyle; // Assign the style based on the condition

    return (
        <p style={style}> 
        	Your Age is: {age} 
        </p>
    );
}

export default ConditionalCss;

Here, we first determine the style based on the age and store it in the style variable. Then we use that variable to set the style of the paragraph.

Method 3: Dynamic Style Properties

This method shows how to use template literals for dynamically setting style properties. It's a more compact way to handle styles:


// Method 3

const ConditionalCss = () => {
    const age = 20;
    // Use template literals to create a style object
    const myStyle = {
        backgroundColor: `${ age >= 18 ? "green" : "orange" }`, // Dynamic background color
        color: "#000", // Text color remains the same
    }

    return (
        <p style={myStyle}> 
            Your Age is: {age} 
        </p>
    );
}

export default ConditionalCss;

In this example, the background color is chosen based on the age condition using a template literal, making it a concise way to manage dynamic styles.

Summary

Conditional CSS in React allows you to apply different styles based on specific conditions. You can use inline styles directly, store styles in variables, or use template literals to create dynamic styles. This flexibility makes your application more interactive and visually appealing!