? JSX Styling

⚡ Quick Overview

React allows you to style elements in multiple ways — the most common being inline styling and dynamic styling. Inline styles are defined as JavaScript objects, while dynamic styles change based on variables, props, or component state.

• Inline styling: Pass a JavaScript object to the style attribute.
• Dynamic styling: Change styles based on conditions, props, or state.
• Conditional classes: Switch CSS classes using JavaScript expressions.
• Mixed approach: Use classes for structure and inline styles for quick dynamic tweaks.

? Key Concepts

• In JSX, style accepts a JavaScript object, not a string.
• CSS property names use camelCase (e.g., backgroundColor).
• Inline styles are written using double curly braces: style={{ color: "red" }}.
• Dynamic styling lets UI respond to state, props, and conditions.
• Use className (not class) for CSS classes in JSX.

? Syntax & Theory

In JSX, the style attribute is passed an object instead of a string. CSS properties are written in camelCase and enclosed in double curly braces.

The first set of braces { } puts you into JavaScript mode, and the inner object holds the CSS properties and values:

<h2 style={{ color: "blue", textAlign: "center" }}>Hello</h2>

For more complex styles, you usually define a style object and then pass it to style, which keeps your JSX cleaner and easier to read.

? Inline Styling in JSX

Inline styles are ideal for small, component-specific styles that don't need to be reused across the app.

// Define a reusable inline style object for the heading
function InlineExample() {
  const headingStyle = {
    color: "blue",
    textAlign: "center",
    backgroundColor: "#e0f7fa",
    padding: "10px"
  };

  return <h2 style={headingStyle}>Styled with Inline CSS</h2>;
}

The first set of braces { } enters JavaScript mode, and the second pair defines the headingStyle object that holds the CSS properties.

⚙️ Dynamic Styling

Dynamic styling lets you change styles based on runtime values such as props or state. This is great for interactive UI elements that react to user actions or conditions.

// Change text color and label based on the isActive prop
function DynamicStyleExample({ isActive }) {
  const style = {
    color: isActive ? "green" : "red",
    fontWeight: "bold"
  };

  return <h3 style={style}>{isActive ? "Active" : "Inactive"}</h3>;
}

Here, the color property and the rendered text both change depending on the value of isActive.

? Conditional Class Styling

Instead of inline styles, you can apply different CSS classes conditionally using JavaScript expressions. This keeps layout and theming inside your CSS files while still being dynamic.

// Pick a CSS class based on the isDark prop
function ConditionalClassExample({ isDark }) {
  const className = isDark ? "dark-theme" : "light-theme";
  return <div className={className}>Theme Mode</div>;
}

Remember to use className instead of class in JSX and assign the class name dynamically using JavaScript expressions.

? Mixing Inline and Class Styles

You can combine CSS classes for layout/structure and inline styles for small, dynamic tweaks such as colors, sizes, or visibility.

// Use a CSS class for layout and inline styles for dynamic text styling
function MixedStyleExample() {
  const color = "purple";
  return (
    <div className="box" style={{ color: color, fontSize: "20px" }}>
      Mixed Styling Example
    </div>
  );
}

If both the class and inline styles define the same property, the inline style will override the class-based style.

? Live Output & Explanation

⚠️ Inline Styling Limitations

• ❌ No pseudo-classes (like :hover) or media queries using plain inline styles.
• ❌ Can make components harder to read and maintain in large projects.
• ✅ Best for dynamic or one-time styles that depend on runtime values.