How to change styles based on condition in React?

Question

How to change styles based on condition in React?

Answer

You can conditionally apply styles in React using:

1. Inline styles:

function Status({ isOnline }) {
  return (
    <p style={{ color: isOnline ? 'green' : 'red' }}>
      {isOnline ? 'Online' : 'Offline'}
    </p>
  );
}

2. Conditional className:

function Button({ active }) {
  return (
    <button className={active ? 'btn-active' : 'btn'}>
      {active ? 'Active' : 'Inactive'}
    </button>
  );
}

Using clsx library:

npm install clsx

import clsx from 'clsx';

<button className={clsx('btn', { 'btn-active': active })}>Click Me</button>;

Real-World Example

• Toggling theme (dark/light)
• Showing success/error states
• Styling active navigation links

Quick Practice

Build a button that turns green when clicked and red when unclicked.

Summary

Conditional styles in React can be applied using inline logic, className expressions, or helper libraries like clsx.