React Components 使用 css 个未导入的文件

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。使用它，生成唯一的 class 名称。

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

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

像这样使用css：

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

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

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

这样，您的 css 样式就不会混淆了

React Components 使用 css 个未导入的文件

React Components using css files that are not imported to them

css

reactjs

react-router

create-react-app