Lesson 34 — Inline Styling in React | Dynamic Styling Explained

🧭 Introduction

In the previous lesson, you learned how to style React components using CSS files. While CSS files are great for global and reusable styles, sometimes you need quick, dynamic, or conditional styling directly inside your component.

For such cases, React provides Inline Styling.

In this lesson, you will learn:

• What inline styling is in React
• How inline styles work
• Styling using JavaScript objects
• Dynamic and conditional inline styles
• When to use inline styles and when not to

❓ What is Inline Styling in React?

Inline styling means:

Applying styles directly to JSX elements using the style attribute.

Unlike HTML, React inline styles:

• Are written as JavaScript objects
• Use camelCase instead of kebab-case

🧠 Inline Styling Syntax (Important)

❌ HTML Style (Not valid in React)

<div style="background-color: red;"></div>

✅ React Inline Style

<div style={{ backgroundColor: "red" }}></div>

✔ Styles are inside {}
✔ Property names use camelCase

🧩 Simple Inline Styling Example

const InlineStyleExample = () => {
  return (
    <h2 style={{ color: "blue", fontSize: "24px" }}>
      Inline Styling in React
    </h2>
  );
};

export default InlineStyleExample;

🧠 Why camelCase is Required?

CSS:

background-color
font-size

React inline style:

backgroundColor
fontSize

Because JSX uses JavaScript objects, not strings.

🧩 Using Style Object (Recommended Way)

Instead of writing styles inline inside JSX, define a style object:

const headingStyle = {
  color: "green",
  textAlign: "center",
  marginTop: "20px",
};

const Component = () => {
  return <h1 style={headingStyle}>Styled Heading</h1>;
};

export default Component;

✔ Cleaner
✔ Reusable
✔ Easier to read

🧩 Dynamic Inline Styling (Very Important)

Inline styles are perfect for dynamic styles.

Example: Change Color Based on Condition

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

export default Status;

🧩 Inline Styling with State

import { useState } from "react";

const ToggleStyle = () => {
  const [active, setActive] = useState(false);

  return (
    <button
      style={{
        backgroundColor: active ? "green" : "gray",
        color: "white",
        padding: "10px",
      }}
      onClick={() => setActive(!active)}
    >
      Toggle Button
    </button>
  );
};

export default ToggleStyle;

✔ Style updates automatically when state changes

🧩 Inline Styles vs CSS Classes (Comparison)

⚠ Limitations of Inline Styling

❌ Cannot use :hover, :active
❌ Cannot use media queries
❌ Styles not reusable across components
❌ JSX becomes cluttered

👉 For large styling needs, use CSS or CSS Modules.

⚠ Common Mistakes

❌ Using kebab-case property names
❌ Forgetting double braces {{ }}
❌ Overusing inline styles
❌ Writing large styles inside JSX

🎯 Best Practices

✅ Use inline styles for dynamic values
✅ Use style objects instead of inline literals
✅ Avoid inline styles for layout-heavy designs
✅ Combine inline styles with CSS classes

❓ FAQs — Inline Styling in React

🔹 Is inline styling bad in React?

No. It’s useful for dynamic and conditional styles.

🔹 Can I use hover effects with inline styles?

No. Use CSS or CSS Modules for hover effects.

🔹 Should I use inline styles everywhere?

No. Use them only when necessary.

🔹 Are inline styles faster?

Not significantly. Use them for clarity, not performance.

🧠 Quick Recap

✔ Inline styles use JavaScript objects
✔ Property names use camelCase
✔ Best for dynamic styling
✔ Limited compared to CSS files

🎉 Conclusion

Inline styling in React is a powerful tool when used correctly. It shines in situations where styles need to change dynamically based on state or props.

Understanding inline styles prepares you for CSS Modules and modern styling solutions 🚀

👉 Next Lesson (SECTION 7):
Lesson 35 — CSS Modules in React