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

【问题标题】：import divided css file in react components在反应组件中导入分割的css文件
【发布时间】：2020-02-09 06:06:00
【问题描述】：

您好，我将组件拆分并使用 react-router-dom，我决定为每个组件拆分 css，例如 Main.jsx - Main.css CustomerBase.jsx - customerbase.css 但问题是 css 已加入，如果我将 @ 的主体颜色设置为白色987654324@ 和黄色为Main.jsx 它将使用白色为Main and CustomerBase 我怎样才能防止这种情况？

像这样： customerbase.css

body{
    background: white;
}

main.css

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

【问题讨论】：

我认为，react 样式的组件 (npmjs.com/package/styled-components) 是您需要的。

标签： javascript css reactjs react-router-dom

【解决方案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>

【讨论】：