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

Question

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

    overflow: hidden;

    margin: 0;

    padding: 0;

}

#title-component h1 {

    color: green;

}

#content-component {

    background: white;

}

#content-component h1 {

    color: red;

}

<div id="title-component">

  <h1>Hi There, Here you have green h1 tag.</h1>

</div>

<div id="content-component">

  <h1>But Here, You can see a red h1 tag!</h1>

</div>