Conditional Styling for Dynamic UIs in React JS 2025

Conditional Styling for Dynamic UIs in React JS

In React, conditional styling allows you to dynamically change the appearance of components based on state, props, or user interactions. This is especially useful for building interactive UIs, where elements need to adapt to different conditions. Let's dive into how you can implement conditional styling in React JS.

1. Basic Conditional Styling with Inline Styles

One way to apply conditional styles in React is by using inline styles. You can toggle different styles based on a condition using JavaScript.

        // Basic Conditional Styling using Inline Styles
        import React, { useState } from 'react';

        const MyComponent = () => {
            const [isClicked, setIsClicked] = useState(false);

            const handleClick = () => {
                setIsClicked(!isClicked);
            };

            const buttonStyle = {
                backgroundColor: isClicked ? 'green' : 'red',
                color: 'white',
                padding: '10px 20px',
                border: 'none',
                cursor: 'pointer'
            };

            return (
                
                    {isClicked ? 'Clicked' : 'Click Me'}
                
            );
        };

        export default MyComponent;
    

In the example above, we define a `buttonStyle` object where the background color is determined by the `isClicked` state. If the button is clicked, the background color will turn green; otherwise, it will be red.

2. Conditional Styling with CSS Classes

Another way to apply conditional styling is by dynamically adding or removing CSS classes. This can be achieved using JavaScript's conditional operators or libraries like `classnames`.

        // Conditional Styling with CSS Classes
        import React, { useState } from 'react';
        import classNames from 'classnames';

        const MyComponent = () => {
            const [isActive, setIsActive] = useState(false);

            const toggleActive = () => {
                setIsActive(!isActive);
            };

            return (
                
                    {isActive ? 'Active' : 'Inactive'}
                
            );
        };

        export default MyComponent;
    

In this example, the `classNames` library is used to conditionally apply `bg-blue-500` (Tailwind CSS class for a blue background) if the `isActive` state is true, and `bg-gray-500` if it's false. This makes it easy to toggle between different styles.

3. Conditional Styling Based on Props

You can also conditionally style elements based on props passed to a component. This is useful when you want the component to react to changes in its parent component.

        // Conditional Styling Based on Props
        const Button = ({ isPrimary }) => {
            return (
                
                    {isPrimary ? 'Primary Button' : 'Secondary Button'}
                
            );
        };

        export default Button;
    

In this example, the `Button` component receives a prop `isPrimary`. Based on this prop, the button will either have a green background (`bg-green-500`) for the primary button or a gray background (`bg-gray-500`) for the secondary button.

4. Complex Conditional Styling Example

You can combine both inline styles and conditional class names for more complex styling logic. Here's an example where both inline styles and classes are used together based on different conditions.

        // Complex Conditional Styling Example
        import React, { useState } from 'react';
        import classNames from 'classnames';

        const ComplexComponent = () => {
            const [isDarkMode, setIsDarkMode] = useState(false);
            const [isHovered, setIsHovered] = useState(false);

            const buttonStyle = {
                padding: '12px 24px',
                borderRadius: '5px',
                cursor: 'pointer',
                boxShadow: isHovered ? '0 4px 8px rgba(0, 0, 0, 0.2)' : 'none'
            };

            return (
                

                     setIsDarkMode(!isDarkMode)}
                        onMouseEnter={() => setIsHovered(true)}
                        onMouseLeave={() => setIsHovered(false)}
                    >
                        Toggle Theme
                    
                
            );
        };

        export default ComplexComponent;
    

In this example, the component dynamically changes its background color based on the `isDarkMode` state. Additionally, the button's shadow changes when the mouse hovers over it, using inline styles. This demonstrates how you can mix both approaches for more dynamic styling.

5. Conclusion

Conditional styling is a powerful technique for building dynamic UIs in React. By combining state, props, and different styling techniques such as inline styles and CSS classes, you can create interactive and responsive components. React's flexibility allows for seamless integration of these techniques, giving you full control over the appearance of your application.