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

Posted 2023-02-22

【中文标题】在反应组件中导入分割的css文件

【英文标题】：import divided css file in react components

【发布时间】：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) 是您需要的。

【参考方案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>