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 Modules使用CSS模块。使用此模块，可以生成唯一的类名。

如果您不想这样做，那么您可以使用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样式就不会混淆了

使用未导入到它们的css文件来反应组件

1 个答案: