React Sass Styling

Styling in React plays a big role in how your web application looks and feels. Just like in regular HTML/CSS websites, React also supports various ways to style components. The two most commonly used methods are CSS (Cascading Style Sheets) and SASS (Syntactically Awesome Stylesheets).

Let’s understand both:

---

Styling with Regular CSS in React

React allows you to use traditional CSS files in your project.

How to use:

1. Create a CSS file like App.css.
2. Add your styles inside it.
3. Import it in your component using:

import './App.css';

Example:

App.css:

  h1 {
  color: blue;
  text-align: center;
}

App.js:

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello from React!</h1>;
}

This is simple and works well for small projects. But for larger applications, this can lead to global styles clashing.

---

Using CSS Modules

To avoid style conflicts, React supports CSS Modules. These are CSS files with local scope.

How to use:

1. Rename your CSS file to ComponentName.module.css
2. Import the styles as an object.

Example:

Button.module.css:

  .btn {
  background-color: green;
  color: white;
  padding: 10px;
}

Button.js:

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

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

This keeps your styles component-specific and avoids conflicts.

---

What is SASS?

SASS stands for Syntactically Awesome Stylesheets. It is a CSS preprocessor that adds extra features like:

• Nesting
• Variables
• Mixins
• Functions

SASS makes writing CSS more powerful and organized.

---

Using SASS in React

To use SASS in React, you first need to install it.

Installation:

In your React project, run:

npm install sass

Then, rename your .css file to .scss, and import it like this:

import './styles.scss';

---

SASS Example

styles.scss:

$main-color: #3498db;

.container {
  background: $main-color;
  padding: 20px;

  h2 {
    color: white;
    font-size: 24px;
  }
}

App.js:

import './styles.scss';

function App() {
  return (
    <div className="container">
      <h2>Styled with SASS</h2>
    </div>
  );
}

With nesting and variables, your styles are cleaner and more maintainable.

---

SASS Modules in React

Just like CSS Modules, you can also use SASS Modules by naming the file like Component.module.scss.

Example:

Card.module.scss:

  .card {
  border: 1px solid gray;
  padding: 15px;
  border-radius: 10px;
}

Card.js:

import styles from './Card.module.scss';

function Card() {
  return <div className={styles.card}>This is a card</div>;
}

---

When to Use What?

Styling Method	Best For
Regular CSS	Small or beginner projects
CSS Modules	Avoiding style conflicts
SASS (SCSS)	Complex styling with variables
SASS Modules	Scalable, component-based projects

---

Final Thoughts

React gives you flexibility in styling your components. You can choose regular CSS for simplicity, or SASS for more advanced features. CSS Modules and SASS Modules help you keep your styles organized, modular, and conflict-free — which is ideal for large-scale React applications.

So, whether you’re building a small portfolio or a big web app, React has styling options to fit your needs.