React多样式表维护问题求助：同名类样式跨页面异常生效

Hey there! This is such a common issue when you're starting out with React and global CSS—let me walk you through why this is happening and how to fix it so your Page-B styles only affect Page-B.

Why This Is Happening #

CSS is global by default. Even though you're importing separate stylesheets for Page-A (afterlogins.css) and Page-B (beforelogins.css), once those files are loaded into your app, all their styles live in the global scope. So when both stylesheets define a .wrapper (or .body-wrapper) class, the styles from the last-loaded file will override the first one—and both pages will end up using that overridden style.

Plus, a quick side note: In React, we use className instead of class for HTML elements (since class is a reserved keyword in JavaScript). Your code currently uses class—it might work, but switching to className is the proper practice.

Solutions to Isolate Styles #

1. CSS Modules (Recommended for Most React Projects) #

CSS Modules automatically add unique hash suffixes to your class names (like wrapper_abc123 and wrapper_xyz789) so they never clash. Here's how to set it up:

Step 1: Rename your stylesheets

Change afterlogins.css → afterlogins.module.css
Change beforelogins.css → beforelogins.module.css

Step 2: Update component imports and class names

For your Home component (Page-A):

import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import styles from '../../Css/afterlogins.module.css'; // Import as a module

class Home extends Component {
  render() {
    return (
      <div className="col-sm-12 col-xs-12"> {/* Use className instead of class */}
        <NavbarafterLogin/>
        <div className={styles['body-wrapper']}> {/* Access hyphenated class names with brackets */}
          <div className="container">
            <ViewProfile/>
          </div>
        </div>
      </div>
    )
  }
}
export default Home;

For your Index component (Page-B):

import React, { Component } from 'react'
import NavbarBeforeLogin from './NavigationBar/navbarbeforelogin';
import styles from '../../Css/beforelogins.module.css'; // Import as a module

class Index extends Component {
  render() {
    return (
      <div className="col-sm-12 col-xs-12"> {/* Use className instead of class */}
        <NavbarBeforeLogin />
        <div className={`${styles['body-wrapper']} clearfix`}> {/* Combine module class with global class */}
          <div className="col-sm-12 col-xs-12">
            <div className={styles['banner-sec']}>
              <div className={styles.jumbotron}>
                <div className="container">
                  <h1>Submit <strong>Profile</strong></h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
export default Index;

Now each component's styles will be scoped exclusively to that component—no more cross-page conflicts.

2. BEM Naming Convention (Quick, No Configuration Needed) #

If you don't want to set up CSS Modules, you can manually namespace your class names using the BEM (Block-Element-Modifier) pattern. This makes class names unique by adding a page-specific prefix:

Update your stylesheets

Page-A (afterlogins.css):

.home-body-wrapper {
  background: red;
  width: 200px;
  height: 200px;
}

Page-B (beforelogins.css):

.index-body-wrapper {
  background: black;
  width: 400px;
  height: 400px;
}

Update component class names

In Home component:

<div className="home-body-wrapper">

In Index component:

<div className="index-body-wrapper clearfix">

This is a simple way to avoid conflicts without changing your build setup.

3. CSS-in-JS Libraries (Full Style Isolation) #

For complete style encapsulation, you can use libraries like styled-components or Emotion to write styles directly in your components. Here's a quick example with styled-components:

First install it:

npm install styled-components

Then update your Home component:

import React, { Component } from 'react';
import NavbarafterLogin from './NavigationBar/navbarafterlogin';
import styled from 'styled-components';

// Define a styled component
const BodyWrapper = styled.div`
  background: red;
  width: 200px;
  height: 200px;
`;

class Home extends Component {
  render() {
    return (
      <div className="col-sm-12 col-xs-12">
        <NavbarafterLogin/>
        <BodyWrapper>
          <div className="container">
            <ViewProfile/>
          </div>
        </BodyWrapper>
      </div>
    )
  }
}
export default Home;

Styles defined this way are totally scoped to the component they're created in—no global conflicts at all.

内容的提问来源于stack exchange，提问作者Karthik Ponnam