css - 使用未导入到它们的 css 文件来 react 组件

Question

基本上，我使用不同的 css 文件是有原因的。我的问题是，当我在一个 css 文件中设置某些样式时，它会影响我拥有的其他一些组件，而不仅仅是我导入此 css 文件的组件。

我认为问题在于 react-router。我认为它共享我导入到它的每个组件的 css 文件。当我停止使用路由器中的组件时，它的 css 文件不会共享。

但是我该如何以不同的方式进行路由呢？我需要将所有组件导入路由器以链接到我的页面。

我还尝试将路由放入单独的文件中，但也没有帮助。

这就是我的路由文件的样子:

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

import './App.css';
import LoginPage from '../pages/LoginPage.js';
import Navbar from './Navbar.js';
import MainPage from '../pages/MainPage.js';
import SportsfieldsListPage from '../pages/SportsfieldsListPage.js';
import MyProfilePage from '../pages/MyProfilePage.js';
import SingleObjectPage from '../pages/SingleObjectPage.js';
import ConfirmPage from '../pages/ConfirmPage.js';
import AdminPage from '../pages/AdminPage.js';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
        <Navbar />
          <Route exact path="/" component={MainPage} />
          <Route exact path="/listaBoisk" component={SportsfieldsListPage} />
          <Route exact path="/LoginPage" component={LoginPage} />
          <Route exact path="/MyProfilePage" component={MyProfilePage} />
          <Route path="/object/:id" component={SingleObjectPage}/>
          <Route path ="/confirm/:id/:value" component={ConfirmPage}/>
          <Route path ="/adminPage" component={AdminPage}/>
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

您可以为您的元素使用 CSS 模块 CSS Modules .使用它，生成唯一的类名。

如果你不想这样做，那么你可以使用 CSS 类嵌套，例如: 对于主页组件

<div className="main-page">
 <div className="title">Main Page</div>
</div>

像这样使用 CSS:

 .main-page .title{
  color:red;
 }

其他组件的相似性使用这样的css

 .login-page .title{
  color:green;
 }

这样你的css样式就不会乱了