CSS changes when navigating from and back to Page - React - html

Question

I'm building an Instagram clone. In doing so, I'm getting a very weird CSS behavior that I've not seen before.
Right now, I've got two pages: sign-up and login. The sign-up page has a link to the login page and vice versa. However, when I load the sign-up page for the first time (if I go directly to the route), it loads as I would expect in terms of the CSS design. However, when I click on the login link then back to the sign-up page, the CSS design changes. More specifically, my main-container width seems to change.
This is what I have so far:
signup.js
import React, {useState} from 'react';
import {Link} from "react-router-dom"
import logo from '../../images/logo.png'
import * as ROUTES from '../../constants/routes';
import Button from "../../components/button/Button"
import './signup.css'
export default function Signup() {
const [inputData, setInputData] = useState({username: '', fullname: '', emailAddress: '', password: ''})
function handleChange(event) {
const {name, value} = event.target
setInputData(prevInputData => ({...prevInputData, [name]: value}))
}
return (
<div className="main-container flex-center flex-column-direction">
<div className="signup-container flex-center flex-column-direction">
<img src={logo} alt="Logo"/>
<form className="form flex-center flex-column-direction">
<input
type="text"
placeholder="Username"
name="username"
value={inputData.username}
onChange={handleChange}
className="form-input"
/>
<input
type="text"
placeholder="Full Name"
name="fullname"
value={inputData.fullname}
onChange={handleChange}
className="form-input"
/>
<input
type="text"
placeholder="Email Address"
name="emailAddress"
value={inputData.emailAddress}
onChange={handleChange}
className="form-input"
/>
<input
type="password"
placeholder="Password"
name="password"
value={inputData.password}
onChange={handleChange}
className="form-input"
/>
</form>
<Button label="Sign up" />
</div>
<div className="login-container flex-center">
<p>Have an account? <Link to={ROUTES.LOGIN} style={{color: 'blue'}}>Log in</Link></p>
</div>
</div>
)
}
and the associated CSS: signup.css
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-column-direction {
flex-direction: column;
}
.main-container {
height: 100vh;
width: 35%;
margin: 0 auto;
padding: 0;
}
.signup-container {
border: 0.1px solid #ebeff0;
padding: 10px;
background-color: white;
width: 100%;
}
.form {
padding: 10px;
width: 100%;
}
.form-input {
width: 100%;
padding: 10px;
border: 0.3px solid #ebeff0;
border-radius: 2px;
margin: 5px;
background-color: #f2fcff;
}
.login-container {
padding: 15px;
border: 0.3px solid #ebeff0;
background-color: white;
width: 100%;
margin: 10px;
}
Like I said before, when I navigate from and back to this page, my main-container width seems to change on its own (see below screenshots). If I refresh the page (on the browser), it goes back to what I would expect (i.e. what's in the CSS file - 35%).
Going to signup page directly:
Then clicking on the "login" page then going back to the signup page (through a link on the login page) gives me this:
As you can see, the width of the form has changed without modifying any parameters in the CSS.
Also, I'm actually getting almost the exact same behavior if I reverse the steps. So if I go to the login page directly then navigate to to the sign up page and back to the login, it changes the CSS width of my container in the login page. I'm hoping the reason is the same as my question above but I'll find that out through help.

Answer 1

All css files in react are merged into one final file, so if you have login.css inside your Login component with .main-container selector it can override .main-container from signup.css file.
You should use unique selectors for components or add additional classes only for properties which are different. E.g:
.main-container {
height: 100vh;
margin: 0 auto;
padding: 0;
}
.main-container__signup {
width: 35%;
}
.main-container__login {
width: 50%;
}