Javascript 在react组件中导入分割的css文件

您好，我使用react router dom拆分了我的组件，我决定为每个组件拆分css，例如

Main.jsx-Main.css

CustomerBase.jsx-CustomerBase.css

，但问题是css是连接在一起的，如果我将

CustomerBase.jsx

的主体颜色设置为白色，将

Main.jsx

的主体颜色设置为黄色，它将将白色同时用于

Main和CustomerBase

如何防止这种情况

像这样： customerbase.css

body{
    background: white;
}

main.css

body{
    overflow: hidden; 
    margin: 0;
    padding: 0;
    background: rgb(236, 107, 32); 
}

---

我认为你不应该多次使用body标签

您可以为每个组件指定一个包装器id名称（#my_component_id），并在其CSS文件中，在样式设置之前添加#my_component_id，以便仅影响此组件。或者，如果您使用的是类似Sass的东西，您可以将所有样式包装在#my#u component_id中

#标题组件{
溢出：隐藏；
保证金：0；
填充：0；
}
#标题部分h1{
颜色：绿色；
}
#内容组件{
背景：白色；
}
#内容组件h1{
颜色：红色；
}

你好，这里有绿色的h1标签。
但是在这里，你可以看到一个红色的h1标签！

我认为，react样式的组件（）就是您需要的。