Inline CSS vs External CSS in React Components 🎨

When styling React components, you can use inline CSS or external CSS files. Both have their pros and cons.

🎯 Inline CSS:
• Defined directly inside the JSX as an object
• Styles are scoped to that component
• Quick for small components

<div style={{ color: "blue", fontSize: "20px" }}>Hello</div>

🎯 External CSS:
• Defined in .css files
• Easier for large projects
• Keeps code clean & reusable

.text {
  color: blue;
  font-size: 20px;
}

<div className="text">Hello</div>

📌 Which to use?
• Small, dynamic styles → Inline CSS
• Big apps & reusable styles → External CSS