在反应组件中导入分割的 css 文件

Question

你好，我有我的部件拆分，并使用反应路由器-DOM和我决定分割的CSS例如每个组件Main.jsx - Main.css CustomerBase.jsx - customerbase.css，但问题是，CSS结合，如果我的身体颜色设置为白色的CustomerBase.jsx和黄Main.jsx它将使用白色两个Main and CustomerBase如何我可以防止这种情况吗？

像这样：customerbase.css

body{

    background: white;

}

主文件

body{

    overflow: hidden; 

    margin: 0;

    padding: 0;

    background: rgb(236, 107, 32); 

}

Answer 1

我认为你不应该多次使用 body 标签。您可以为每个组件设置一个包装器 id 名称 (#my_component_id)，并在其 CSS 文件中，在样式前添加 #my_component_id 以仅影响该组件。或者，如果您使用的是 Sass 之类的东西，您可以将所有样式包装在 #my_component_id 中#title-component {&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}#title-component h1 {&nbsp; &nbsp; color: green;}#content-component {&nbsp; &nbsp; background: white;}#content-component h1 {&nbsp; &nbsp; color: red;}<div id="title-component">&nbsp; <h1>Hi There, Here you have green h1 tag.</h1></div><div id="content-component">&nbsp; <h1>But Here, You can see a red h1 tag!</h1></div>