css – why very same design puts on both parts having various scss data with various designs in React?

I have 2 Elements Login and also Register with various separate designs.

// Login.jsx

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

export default Login;.

// Register.jsx

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

export default Register;.

I have actually established various history shade of both data, that is

// Login.scss

 div {
background-color: red;.
}

// Register.scss

 div {
background-color: aqua;.
}

I have actually made both parts in App.js.
yet both the parts have just one design used i-e Register.scss also I have not imported it in Login.jsx yet still in Login.jsx obtaining the design of Register.scss rather than Login.scss

1. what could be the possibl factor?

2. Can I use very same className designs by separating with various import courses?