React 中如何防止一个组件中的 css 影响另一组件中的 css？

Question

我是 React 新手，所以我不太清楚为什么会发生这种情况。使用 React Router，我有三个路由，/、/signup和/login，并且每个组件中 css 的导入会溢出到其他组件的 css 中，从而破坏了样式。在这种情况下，div 元素不是word每个组件的 css 中描述的颜色，而是全部显示为绿色，这应该只发生在 Signup 组件中。我可以做什么来解决这个问题？

应用程序.js

import HomePage from './pages/HomePage/HomePage'
import LoginPage from './pages/LoginPage/LoginPage'
import SignupPage from './pages/SignupPage/SignupPage'
import  {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

function App() {
    return (
      <Router>
        <Switch>
          <Route path="/" exact component={HomePage}/> 
          <Route path="/signup" component={SignupPage}/>
          <Route path="/login" component={HomePage}/>
        </Switch>
      </Router>
    )
}

export default App;

登录页面.js

import { React } from 'react'
import "./LoginPage.css"

export default function LoginPage(){
    return(
      //In css file, word is red, but comes out green instead
      <div className="word">login</div>
    )
}

注册页面.js

import { React } from 'react'
import "./SignupPage.css"

export default function SignupPage(){
    return(
      //In css file, word is green
      <div className="word">signup</div>
    )
}

主页.js

import React, { useState } from 'react'
import "./HomePage.css"

export default function HomePage() {

    return (
         //In css file, word is hotpink, but comes out green instead
         <div className="word">Home</div>
    )

我需要在 App.js 文件中添加一些内容吗？

Answer 1

为每个页面创建一个顶部 div：

export default function HomePage() {
return (
     <div className="homepage"><div className="word">Home</div></div>
)

对注册页面执行类似的操作。

然后在CSS中

主页.css

 .homepage .word{
     
      color:red;
    
  }

注册.css

.signup .word{
 
  color:green;

 }

现在，根据您是否在页面word内使用类或（任何深度级别），将具有不同的样式。signuphomepageword