SCSS (Sass) is a sophisticated CSS preprocessor that extends the capabilities of standard CSS. React is a popular JavaScript toolkit for designing user interfaces.

They provide a solid and practical approach to handling styles in React apps when used together. SCSS Modules are a particular approach for using SCSS in React.

1. Overview of SCSS Modules

SCSS Modules are a technique to encapsulate styles within specific React components. It allows developers to locally set CSS styles for a single component, ensuring the styles remain separate and do not conflict with other program sections. SCSS Modules also provide reusability and maintenance, making complicated project styles easier to handle.

2. Configuring SCSS Modules

To use SCSS Modules within a React project, you must first install Node.js and npm (Node Package Manager). Start a new React project or use a project you already have with create-react-app.

Install the following dependencies for using SCSS within the project:

npm install node-sass@^4.14.1 —save-dev

After installation, rename your CSS files to SCSS (for example, styles.css to styles. scss). This is required because React with SCSS Modules wants SCSS files to have the.scss extensions.

3. Creating a SCSS Module

To make an SCSS Module, create a new SCSS file with the.module.scss as an extension, such as Button.module.scss. This filename convention is required for React to recognize the file's location as a module. As always, you may write your component-specific designs in this directory.

// Button.module.scss

.buttons {

  padding: 15px 25px;

  background-color: #007bff;

  color: #ffffff;

  border: none;

  border-radius: 5.4px;

  cursor: pointer;

  &:hover {

    background-color: #0056b3;

  }

}

4. Making Use of SCSS Modules in Components

You may import and use your SCSS Modules in your React elements after you've generated them. To do this, make use of the import expression that uses the React framework's designs objects:

// Button.js

import React from 'react';

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

const Button = () => {

  return <button classNames={styles.button}>Please Click here </button>;

};

export default Button;

Please make a note of how we've used the styles. button class name extracted from the Button. module. scss file. This demonstrates how React adds locally assigned styles to the element.

5. Recognising the Local Scope

One of the primary benefits of SCSS Modules was that they give local scope to various styles. When the element is displayed, React produces unique class names for each SCSS component to ensure the styles do not clash with other parts. This can be done by using a method known as CSS Modules.

For example, the resulting HTML for the button's component is going to appear like this:

<button class=“Button_button_1g3d4w_click">Click Here</button>

6. Reusing SCSS Modules

SCSS Modules can be used throughout several components without concern about style collisions. As an example, if you are using the Navbar components, you may import and make use of the same Button.module.scss that is shown below:

// Navbars.js

import React from 'react';

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

const Navbars = () => {

  return (

    <nav>

      <ul>

        <li>

          <a className={styles.button} href="#">Home</a>

        </li>

        <li>

          <a className={styles.button} href="#">About</a>

        </li>

        {/*Adding more menu items*/}

      </ul>

    </nav>

  );

};

export default Navbars;

7. Overriding Styles

You may need to override designs from an SCSS Module in specific situations, like altering the Navbar button's background color on hover. You may accomplish this using either standard CSS or SCSS. In the following example, we'll use SCSS to change the hover color of a button:

// Navbar.modules.scss

@use './Button.module.scss' as *;

.navbar-buttons {

  @extend %button; // Reusing the styles from the Buttons. module. scss

  &:hover {

    background-color: #ff5722; // Overriding of the hover color }

}

8. Conditional Styling

Conditional styles may be easily applied to components because of SCSS Modules. You may use JavaScript statements within your SCSS application that selectively apply designs based on the component's position or properties.

For example, let's change the Button. module. When a prop is selected, use CSS to change the background color of the buttons to green.Primary is true:

// Button.module.scss

.buttons {

  padding: 12px 25px;

  background-color: #017bff;

  color: #ffffff;

  border: none;

  border-radius: 6px;

  cursor: pointer;

  &:hover {

    background-color: #0055b3;

  }

  &.primary {

    background-color: #27a825;

  }

}

Now, in the Button.js element, we can apply the. primary class dynamically depending on the isPrimary prop is:

// Button.js

import React from 'react';

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

const Buttons = ({ isPrimary }) => {

  const buttonClassNames = isPrimary ? `${styles.button} ${styles.primary}` : styles.button;

  return <button classNames={buttonClassNames}>Click Here</button>;

};

export default Button;

9. Global Styles

Although SCSS Modules emphasize local scope for styles, there may be occasions when you require global styles to apply throughout the whole application. Create a separate SCSS file, e.g., global.module.scss, and include it in your entry file (e.g., index.js) or a layout component that encapsulates all other components to do this.

Any elements defined in global.module.scss are going to be globally applied:

// global.module.scss

body {

  font-family: 'Arial', sans-serif;

  margin: 0;

  padding: 0;

}

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import './global.module.scss'; // Importing the global styles

ReactDOM.render(<App />, document.getElementById(‘root'));

← Prev Next →

Express.js Tutorial