如何避免在 React 中继承 .css

Question

我有一个反应应用程序。 App.js 片段如下：

import ServiceManual from './components/pages/ServiceManual'
import './App.css'; 

const App = () => {
      return (
            <>
                  <Router>
                              <Switch>
                                    <Route path='/ServiceManual' exact component={ServiceManual} />
                                    <Route path='/' exact component={Home} />
                              </Switch>
                  </Router>
            </>
      )
};

ServiceManual 组件包含它自己的ServiceManual.module.css

import React from 'react';
import { Container } from 'react-bootstrap';
import '../App.css';
import './ServiceManual.module.css';

export default function ServiceManual() {
    return <Container fluid className="mainPage">
....

现在，我的问题是 ServiceManual.module.css 中包含的一些定义会影响我的 Home 页面的内容。

看起来App.js中的组件的导入构建了一个巨大的容器，所有导入的定义都将在其中完成。

我在互联网上找到了将 xxx.module.css 命名为 xxx.css 的建议，该文件必须仅在导入的模块中使用。但事实并非如此。

当我在主页上打开浏览器调试器时，我看到一些不应该存在的 .css 定义（在 xxx.module.css 中定义）并改变了我主页的显示方式。

请问有人给点意见​​吗？

Answer 1

事实上，所有的 CSS 文件都包含在页面中，只要它们被导入，无论在哪里。 如果您需要为不同的元素设置不同的样式，请为它们指定唯一的类名，并在其各种 CSS 脚本中通过它们的类名来处理它们。