cssreactjsmernreact-fullstack

CSS files are getting applied to all the components in my react app, even after using CSS modules

I am making a react web-page about a Finance Planner and i have 4 components: Dashboard, Homepage, Login-page, and SignUp-page. What happened is i first coded the pages in basic HTML and CSS and then had to migrate to react. Now the problem I'm facing is that the CSS files which are meant for specific pages are getting applied to all the pages. I am new to react and don't know how to solve this. I am attaching a picture of my directory and all the components: My Directory This is what my inspect says about the styles that are getting applied to my Homepage: Styles getting applied to the Homepage

I have tried using CSS modules. Before using CSS modules the css files for Homepage were overriding the css for all the other pages. I asked ChatGPT for help and it suggested using CSS modules. So after using CSS modules I was expecting for the problem to be solved but now the CSS for the SignUp page are overriding all the other css.

DashGeneral.module.css:

.body {
  background-color: lightgray !important;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.mainContent {
  margin-left: 150px; /* Adjusted to match the sidebar width */
  padding: 20px;
}

Header.module.css:

/* styles.module.css */

.header {
  height: 125px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: lighter;
  background-color: white;
  border-bottom: 1px solid transparent;
  z-index: 100;
}

.leftSection {
  display: flex;
  align-items: center;
}

.logo {
  height: 80px !important;
  width: auto !important;
  margin-left: 50px;
}

.logo:hover {
  cursor: pointer;
}

.nameText {
  font-size: 30px;
  margin-left: 20px;
  font-weight: bold;
  color: black;
}

.nameText:hover {
  cursor: pointer;
}

.rightSection {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-right: -75px;
}

.features {
  display: flex;
  margin-right: 130px;
  background-color: transparent;
}

.featureButton {
  margin-left: 20px;
  padding: 10px;
  font-size: 20px;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
  text-align: center;
  margin-right: 5px;
  height: 50px;
  margin-top: 12px;
}

.featureButton:hover {
  background-color: lightgray;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.featureButton:active {
  background-color: gray;
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.userInfo {
  margin-left: 30px;
  display: flex;
  align-items: center;
}

.userName {
  font-size: 20px;
  margin-right: 20px;
  font-weight: bold;
  color: black;
}

.userName:hover {
  cursor: pointer;
  text-decoration: underline;
}

.profilePic {
  height: 75px;
  border-radius: 50%;
  margin-left: 10px;
}

.profilePic:hover {
  cursor: pointer;
}

Sidebar.module.css:

/* styles.module.css */

.sidebar {
  position: fixed;
  top: 125px;
  left: 0;
  bottom: 0;
  background-color: white;
  width: 300px;
  z-index: 200;
  padding-top: 10px;
  border-right: 2px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcomeText {
  margin-left: 10px;
  padding: 10px;
  font-size: 40px;
  color: #000;
  margin-top: 25px;
  font-weight: bold;
}

.menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
}

.menuItem {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 15px 0;
  margin-left: 20px;
}

.menuButton {
  width: auto;
  padding: 15px;
  font-size: 25px;
  color: #000;
  background-color: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
  text-align: center;
}

.menuButton:hover {
  background-color: lightgray;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.menuButton:active {
  background-color: gray;
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

Homepage.module.css

/* styles.module.css */

/* General Styles */
.body {
    margin: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background: linear-gradient(180deg, white, rgb(56, 55, 55));
    color: #2e2e8f;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Header Section */
.headerContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: transparent;
}

.logoSection {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.logo {
    width: 60px;
    margin-right: 10px;
    border-radius: 50%;
}

.companyName {
    font-size: 24px;
    font-weight: bold;
    color: #2e2e8f;
}

/* Navigation Menu */
nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 20px;
}

.navButton {
    color: white;
    background-color: #2e2e8f;
    font-weight: bold;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.navButton:hover {
    background-color: #1e1e8f;
}

/* Main Content Area */
main {
    text-align: center;
    flex-grow: 1;
}

.heroSection {
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 20px;
}

.imageContainer {
    display: flex;
    justify-content: center;
}

.heroImage {
    max-width: 100%;
    height: auto;
}

.heroTitle {
    font-size: 28px;
    margin: 10px 0;
    color: #2e2e8f;
    line-height: 1.5;
    font-weight: bolder;
}

/* Buttons Section */
.buttons {
    margin-top: 20px;
}

.signupButton, .loginButton {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.signupButton {
    background-color: #5a67d8;
    color: white;
    margin-right: 10px;
}

.signupButton:hover {
    background-color: #131cc5;
}

.loginButton {
    background-color: #3b82f6;
    color: white;
}

.loginButton:hover {
    background-color: #1e40af;
}

/* Footer Section */
footer {
    text-align: center;
    font-size: 14px;
    color: white;
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

footer p {
    margin: 0;
}

.contactIcon {
    width: 30px;
    height: auto;
}

LoginPage.module.css

/* LoginPage.module.css */
body {
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-image: linear-gradient(180deg, #415A77, black);
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  width: 1000px;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  overflow: hidden;
}

.welcomeSection {
  width: 50%;
  background: linear-gradient(45deg, black, #415A77);
  color: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 75px;
  margin-right: 10px;
  border-radius: 50%;
}

.companyName {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.welcomeSection h1 {
  margin: 20px 0;
  font-size: 32px;
}

.welcomeSection p {
  font-size: 20px;
}

.loginSection {
  width: 50%;
  padding: 40px;
}

.inputGroup {
  margin-bottom: 20px;
}

.inputGroup label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.inputGroup input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.forgotPassword {
  color: #0072ff;
  text-decoration: none;
  font-size: 14px;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
  border: 2px solid #0072ff;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.loginBtn {
  background: #0072ff;
  color: white;
}

.signupBtn {
  background: white;
  color: #0072ff;
}

.btn:hover {
  background: #005bb5;
  color: white;
}

.signupBtn:hover {
  background: #f3f7fa;
  color: #005bb5;
}

.googleSignin {
  margin-bottom: 20px;
}

.googleBtn {
  background: #ffffff;
  color: #333;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  justify-content: center;
  cursor: pointer;
}

.googleBtn img {
  width: 20px;
  margin-right: 10px;
}

.googleBtn:hover {
  background: #f3f7fa;
  color: black;
}

.googleBtn:active {
  background: #e0e4e7;
  color: black;
}

.socialMedia {
  text-align: center;
}

.socialMedia span {
  display: block;
  margin-bottom: 10px;
  color: #777;
}

.socialMedia a img {
  width: 24px;
  margin: 0 20px 10px;
}

SignUpPage.module.css

/* SignupPage.module.css */
body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-image: linear-gradient(180deg, #415A77, black);
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 1000px; /* Same increased container size */
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    border-radius: 8px;
    overflow: hidden;
}

.welcomeSection {
    width: 50%;
    background: linear-gradient(45deg, black, #415A77);
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 75px;
    margin-right: 10px;
    border-radius: 50%;
}

.companyName {
    font-size: 24px;
    font-weight: bold;
    color: white;
}

.welcomeSection h1 {
    margin: 20px 0;
    font-size: 32px;
}

.welcomeSection p {
    font-size: 20px;
}

.signupSection {
    width: 50%;
    padding: 40px;
}

.inputGroup {
    margin-bottom: 20px;
}

.inputGroup label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #333;
}

.inputGroup input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.actions {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.btn {
    padding: 10px 30px;
    font-size: 16px;
    border: 2px solid #0072ff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.signupBtn {
    background: #0072ff;
    color: white;
}

.signupBtn:hover {
    background: #005bb5;
}

.googleSignin {
    margin-bottom: 20px;
}

.googleBtn {
    background: #ffffff;
    color: #333;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 10px;
    width: 100%;
    justify-content: center;
    cursor: pointer;
}

.googleBtn img {
    width: 20px;
    margin-right: 10px;
}

.socialMedia {
    text-align: center;
}

.socialMedia span {
    display: block;
    margin-bottom: 10px;
    color: #777;
}

.socialMedia a img {
    width: 24px;
    margin: 0 20px 10px;
}

.googleBtn:hover {
    background: #f3f7fa;
}

.googleBtn:active {
    background: #dde2e6;
}
Solution

  • In react, the css of one file is applied to all the files throughout the project. If you have used the same className in more than 1 files, the file will be applied to all the elements with that className, no matter what file they are in.

    As a solution, you can do the following:

    For body in the Dashboard section, you should the className dashboard-body in the Dashboard.jsx file and apply the style as follows:

    .dashboard-body { background-color: lightgray !important; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    Similarly, for body in Homepage module, you apply homepage-body in the Homepage.jsx file and apply the style as follows in the css file

    .homepage-body { margin: 0; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background: linear-gradient(180deg, white, rgb(56, 55, 55)); color: #2e2e8f; display: flex; flex-direction: column; min-height: 100vh; }

    Follow the above steps for rest of the classes