如何避免在React中继承.css

Question

我有一个react应用程序。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文件的建议，该文件必须仅在导入它的模块中使用。但事实并非如此。

当我在主页上打开浏览器调试器时，我会看到一些.css定义(在xxx.module.css中定义(，它们不应该在那里，并且会改变我主页的显示方式。

有人提示吗？

Answer 1

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