? Inline CSS in React

⚡ Quick Overview

Inline CSS in React lets you style elements directly using the style attribute. Instead of writing styles in separate CSS files, you define them as JavaScript objects and pass them into JSX.

This is especially useful for dynamic styling, where style values depend on component state or props, such as active buttons, theme toggles, or validation states.

• Styles are written as JavaScript objects.
• CSS properties use camelCase, not kebab-case.
• Perfect for small, self-contained, and dynamic UI elements.

? Key Concepts

• Style attribute as an object: style in JSX expects an object, not a string.
• camelCase properties: e.g., backgroundColor instead of background-color.
• Reusable style objects: Define once, reuse across components.
• Dynamic styles: Use state/props to change styles at runtime.
• Merging styles: Combine multiple objects using the spread operator (...).

? Syntax & Theory

In React, inline styles are passed as a JavaScript object to the style prop:

• Property names use camelCase.
• Values are usually strings (e.g., "10px", "red").
• You can store style objects in variables for reuse.

// Generic pattern for using inline styles in JSX
const styles = {
  backgroundColor: "lightblue",
  padding: "12px",
  borderRadius: "6px"
};

function MyComponent() {
  return (
    <div style={styles}>Hello with inline styles</div>
  );
}

? Basic Inline Styling

Inline styles in React are defined as objects, where property names are written in camelCase instead of kebab-case. You pass this object directly to the style attribute.

// Simple component using inline styles on a div
function InlineExample() {
  return (
    <div
      style={{
        backgroundColor: "lightblue",
        color: "darkblue",
        padding: "15px",
        borderRadius: "8px",
        textAlign: "center"
      }}
    >
      <h4>Inline CSS Example</h4>
      <p>This element is styled directly using the style attribute.</p>
    </div>
  );
}

Notice that properties like background-color become backgroundColor in JSX.

? Using Style Objects

It is often cleaner to define styles in a variable or constant, especially when you reuse the same styles in multiple places.

// Reuse a style object across the component
function ObjectStyleExample() {
  const boxStyle = {
    border: "2px solid #007bff",
    borderRadius: "5px",
    padding: "10px",
    color: "#333",
    backgroundColor: "#eaf3ff",
    textAlign: "center"
  };

  return (
    <div style={boxStyle}>
      <h5>Using a Style Object</h5>
      <p>Style objects make code cleaner and reusable.</p>
    </div>
  );
}

The style attribute accepts a JavaScript object, not a string — this allows programmatic control and reuse of styles.

? Dynamic Inline Styles (with State)

You can dynamically change styles based on component state or user actions, such as toggling between two button colors.

// Change button color based on isActive state
function DynamicStyleExample() {
  const [isActive, setIsActive] = React.useState(false);

  const buttonStyle = {
    padding: "10px 20px",
    backgroundColor: isActive ? "#28a745" : "#6c757d",
    color: "#fff",
    border: "none",
    borderRadius: "4px",
    cursor: "pointer"
  };

  return (
    <div className="text-center">
      <button
        style={buttonStyle}
        onClick={() => setIsActive(!isActive)}
      >
        {isActive ? "Active" : "Inactive"}
      </button>
    </div>
  );
}

Inline styling works perfectly with React’s state-driven rendering to create interactive UI effects like toggles, highlights, and conditional emphasis.

⚙️ Merging Multiple Styles

You can merge multiple style objects using the ... spread operator. This lets you keep base styles separate from variant styles (success, warning, error, etc.).

// Combine base styles with variant styles using the spread operator
function MergeStyleExample() {
  const baseStyle = { padding: "10px", color: "#fff" };
  const successStyle = { backgroundColor: "green" };
  const warningStyle = { backgroundColor: "orange" };

  const [mode, setMode] = React.useState("success");

  const style =
    mode === "success"
      ? { ...baseStyle, ...successStyle }
      : { ...baseStyle, ...warningStyle };

  return (
    <div className="text-center">
      <h5 style={style}>
        {mode === "success" ? "Success Mode" : "Warning Mode"}
      </h5>
      <button
        className="btn btn-outline-dark mt-2"
        onClick={() => setMode(mode === "success" ? "warning" : "success")}
      >
        Toggle Mode
      </button>
    </div>
  );
}

This approach keeps styles modular and allows easy combination of reusable objects while still remaining expressive and readable.

? Pros & Cons of Inline CSS

• ✅ Pros:
  • Dynamic and easy to modify with state/props.
  • Encapsulated within the component — no external CSS dependencies.
  • Good for small or reusable elements (like buttons, badges, or status labels).
• ⚠️ Cons:
  • No pseudo-classes like :hover or :focus directly.
  • No media queries for responsive design.
  • Harder to maintain in large projects compared to CSS files, modules, or utility frameworks.