why same style applies to both components having different scss files with different styles in React?

Question

I have two Components Login and Register with different separate styles.

// Login.jsx

    import "../../Login.scss";
       function Login() {
        return (
           <>
                <div>Login</div>
           </>
            );
                      }

   export default Login;

// Register.jsx

import React from "react";
import "../../Register.scss";
function Register() {
  return (
    <>
      <div>Register </div>
    </>
  );
}

export default Register;

I have set different background color of both files, that is

// Login.scss

div{
  background-color: red;
}

// Register.scss

div{
  background-color: aqua;
}

I have rendered both components in App.js but both the components have only one style applied i-e Register.scss even I have not imported it in Login.jsx but still in Login.jsx getting the style of Register.scss instead of Login.scss

1. what could be the possibl reason?

2. Can I apply same className styles by differentiating with different import paths?

Answer 1

This is due to the way that Cascading Style sheets work. The .div will adhere to the LAST style rule, as the file is read.

The post below contains the answer.

How to use the same name classes but in separate styles

Answer 2

If you're working with Sass, you may have noticed that any element using the same class name can overwrite each other. Fortunately, there is a solution to this problem: CSS modules. CSS modules are CSS files that scope class names and animation names locally by default.

To implement CSS modules in your project, follow these steps:

1. Rename your style file by adding "module" before the .scss extension, for example: Login.module.scss.
2. Change your import statement to import the module, like so: import styles from "../../Login.module.scss";.
3. Add styles to your elements or components using the syntax <div className={styles.div}>I'm an example</div>.

By using CSS modules, you can avoid conflicts between class names and ensure that your styles are applied correctly.