你好,我拆分了我的组件并使用了 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);
}
最佳答案
我认为你不应该多次使用 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>
关于javascript - 在 React 组件中导入分割的 css 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58345873/