4.10 🎨 Styling in React – From CSS to Styled Components

Hey there! 👋 I’m Vikas Sankhla, a Full Stack Developer and founder of Web Codder.

Today, we’re going to learn how to make your React apps look beautiful using different styling methods – from plain CSS to powerful tools like styled-components.

I’ll explain everything like I’m teaching my younger cousin 👦👧 — super simple, super fun!

🧩 Why Styling Matters

Imagine building a cool website that does amazing stuff… but looks boring 😴.

That’s where styling comes in! It adds colors, spacing, fonts, animations — all the visual magic ✨.

In React, we have many ways to style components. Let’s explore each one step-by-step.

🧵 1. Styling with Traditional CSS

This is the classic way — just like in HTML!

🔧 How it works

1. Create a .css file
2. Write your CSS styles
3. Import the file into your component

✅ Example

cssCopyEdit/* styles.css */
.title {
  color: blue;
  font-size: 24px;
  text-align: center;
}

jsxCopyEdit// App.js
import './styles.css';

function App() {
  return <h1 className="title">Hello World 🌍</h1>;
}

👍 Pros

• Easy to use
• Familiar to everyone

👎 Cons

• All styles are global (can affect other components)

📦 2. CSS Modules – Safer, Scoped Styles

CSS Modules solve the global problem. They scope your CSS to just one component.

🛠 How it works

• Create a .module.css file
• Import it like a JavaScript object

✅ Example

cssCopyEdit/* Button.module.css */
.btn {
  background-color: green;
  color: white;
  padding: 10px;
}

jsxCopyEditimport styles from './Button.module.css';

function Button() {
  return <button className={styles.btn}>Click Me 🚀</button>;
}

👍 Pros

• Styles are scoped to components
• No class name conflicts

🎨 3. Styled-Components – CSS in JS

Now things get fancy! 💅

With styled-components, you write CSS inside JavaScript using a special function.

📦 Install First

bashCopyEditnpm install styled-components

✅ Example

jsxCopyEditimport styled from 'styled-components';

const Title = styled.h1`
  color: tomato;
  font-size: 28px;
`;

function App() {
  return <Title>Styled with Style 💅</Title>;
}

👍 Pros

• Styles are scoped
• You can use JavaScript logic inside styles
• Great for theming and dynamic styles

👎 Cons

• A little more complex
• Slightly larger bundle size

🌈 4. Emotion – Another CSS-in-JS Library

emotion is similar to styled-components but offers more flexibility.

You can write styles in multiple ways:

• Styled components
• css prop
• Object styles

It’s faster and highly customizable.

bashCopyEditnpm install @emotion/react @emotion/styled

Then use it just like styled-components.

📱 Responsive Design in React

Your app should look great on all devices — phones, tablets, and desktops.

💡 Best Tips:

• Use media queries in your styles
• Use flexbox and grid
• Test on different screen sizes

🧪 Example

jsxCopyEditconst Box = styled.div`
  width: 100%;
  padding: 20px;
  background: lightblue;

  @media (max-width: 600px) {
    background: lightcoral;
  }
`;

🧱 Best Practices for CSS in React

🔧 Comparison Table

🎁 Conclusion – Style It Your Way

There’s no “one perfect way” to style in React.
It depends on your project size, team, and personal preference.

Start with simple CSS for small apps.
Use CSS Modules or styled-components for bigger ones.

📢 Stay Connected!

Loved learning this? There’s more fun stuff coming! 🎉

👉 Subscribe & follow us for daily React tips:

• 🔔 YouTube: @web_codder
• 📸 Instagram: @web_codder_official
• 💬 Join our dev WhatsApp group: lightgrey-chamois-101255.hostingersite.com/whatsapp

Let’s build beautiful apps together! 🚀💻