Inline Styles

Inline Styles in React — Detailed Explanation

🔍 What Are Inline Styles?

Inline styles in React are applied using the style prop on a JSX element.
They are written as JavaScript objects with camelCased property names (not kebab-case like in regular CSS).

👉 Inline styles are useful for quick, dynamic, or component-specific styling — especially when styles depend on variables or conditions.

---

✅ Basic Syntax

---

🧠 Key Differences from Regular CSS

Traditional CSS	React Inline Style
background-color	backgroundColor
font-size	fontSize
border-radius	borderRadius
Units like 20px	Must be a string
!important	❌ Not supported

---

✅ Full Example: Card with Inline Styling

---

✅ Dynamic Styles with Inline Logic

Inline styles work well with state or props for dynamic changes.

🔧 Example: Change Color Based on State

---

✅ Hover Effects with Inline Styles?

❌ Inline styles do not support pseudo-selectors like :hover, :focus, or @media.

✅ Workaround: use state to simulate hover.

🔧 Simulating Hover With State

---

❗ When to Use Inline Styles

✅ Good For	❌ Not Good For
Quick prototyping	Large, complex UI projects
One-off component styling	Global theming / style reuse
Dynamic or conditionally styled UI	Responsive design, media queries
Simple conditional appearance	Pseudo-classes like :hover, :focus

---

📌 Summary Table

Feature	Description
style={{ key: val }}	Apply inline styles using a JS object
camelCase keys	Use backgroundColor instead of background-color
String values	Units like 20px must be quoted
No pseudo-classes	:hover, :focus, @media not supported
Dynamic styling	Can use props, state, or logic inside JSX

---

💬 Final Thoughts

• ✅ Great for quick, dynamic, or one-off styles
• ❌ Not ideal for large apps, responsive UI, or reusable styles

For production apps, prefer CSS Modules, Styled Components, or Tailwind CSS for better scalability and maintainability.