如何让全局CSS仅作用于指定React组件及页面而不影响其他组件？

我明白你的需求啦——你不想让index.css里的样式污染整个React应用，只想让它作用在Global组件包裹的登录、注册页面上对吧？下面给你几个实用的解决办法，一步步来就能搞定：

第一步：先移除全局导入的样式 #

首先一定要删掉index.tsx里的这行代码：

import './index.css'

这行代码会让index.css的样式直接作用于整个应用，是导致样式污染的根源，必须先去掉。

方法一：使用CSS Modules（推荐，最稳妥的局部样式方案） #

CSS Modules是React官方推荐的局部样式方案，能自动给样式类名添加唯一哈希值，避免冲突：

1. 把你的index.css文件重命名为index.module.css
2. 在Global.tsx里用模块方式导入样式：

// global.tsx
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoginPage from "../../pages/Authentication/Login";
import SignupPage from "../../pages/Authentication/Signup";
// 改成模块导入
import styles from '../../index.module.css';

const Global = () => {
  return (
    {/* 给根容器加上模块里的类名 */}
    <div className={styles.authWrapper}>
      <Router>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/signup" element={<SignupPage />}></Route>
        </Routes>
      </Router>
    </div>
  );
};

export default Global;

3. 修改index.module.css里的所有样式，都嵌套在.authWrapper类名下（这里的类名要和你在组件里用的一致）：

/* index.module.css */
.authWrapper .login-form {
  /* 原来的登录表单样式 */
}
.authWrapper .signup-btn {
  /* 原来的注册按钮样式 */
}
/* 其他所有样式都加上这个父类前缀 */

这样所有样式就只会作用在authWrapper包裹的元素内部，完全不会影响其他组件。

方法二：手动添加命名空间类名 #

如果不想改CSS文件名，也可以用手动加前缀的方式实现局部作用：

1. 在Global.tsx的根容器添加一个自定义的命名空间类名，比如auth-pages-container：

// global.tsx
const Global = () => {
  return (
    <div className="auth-pages-container">
      <Router>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/signup" element={<SignupPage />}></Route>
        </Routes>
      </Router>
    </div>
  );
};

2. 修改index.css里的所有样式，都加上这个命名空间前缀：

/* index.css */
.auth-pages-container .login-container {
  /* 原来的登录容器样式 */
}
.auth-pages-container .input-field {
  /* 原来的输入框样式 */
}
/* 所有样式都嵌套在这个类名下 */

3. 只在Global.tsx里导入index.css：

import '../../index.css'

这种方式原理是通过CSS的后代选择器，让样式只对指定类名内部的元素生效，简单直接。

方法三：使用CSS-in-JS方案（比如styled-components） #

如果你的项目已经在用styled-components这类CSS-in-JS库，可以把样式直接封装在组件里：

// global.tsx
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import LoginPage from "../../pages/Authentication/Login";
import SignupPage from "../../pages/Authentication/Signup";
import styled from 'styled-components';

// 创建一个带样式的包裹组件
const AuthWrapper = styled.div`
  /* 直接在这里写原来index.css里的样式，或者嵌套子元素样式 */
  .login-form {
    background: #fff;
    padding: 20px;
    /* 其他样式 */
  }
  .signup-btn {
    color: #007bff;
    /* 其他样式 */
  }
`;

const Global = () => {
  return (
    <AuthWrapper>
      <Router>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/signup" element={<SignupPage />}></Route>
        </Routes>
      </Router>
    </AuthWrapper>
  );
};

export default Global;

这种方式的样式完全属于这个组件，不会污染全局，适合已经使用CSS-in-JS的项目。

备注：内容来源于stack exchange，提问作者user23351951