javascript - 在 React 组件中导入分割的 css 文件

Question

你好，我拆分了我的组件并使用了 react-router-dom，我决定为每个组件拆分 css，例如 Main.jsx - Main.css CustomerBase.jsx - customerbase。 css 但问题是 css 已加入，如果我将 CustomerBase.jsx 的正文颜色设置为白色，Main.jsx 的正文颜色设置为黄色，则两者都将使用白色Main 和 CustomerBase 我该如何防止这种情况发生？

像这样:客户库.css

body{
    background: white;
}

主.css

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>