Javascript 如何防止Css应用于其他文件？

在这个React组件中，我有Cookbook.js和Cookbook.css。我在Cookbook.css中有很多风格，特别是

form {
    display: inline-block !important;
    padding-top: 30px;
    margin-left: 100px;
}

---

这很好，因为我把它导入了Cookbook.js。但是我创建了另一个名为Survey.js的组件以及Survey.css。在Survey.js中，我也使用表单，但我只导入Survey.css。然而，出于某种原因，Cookbook.CSS中的CSS被应用于my Survey.js中的表单。因此，我在Survey.js上的表单处于一个奇怪的位置。如何确保每个表单的css相互独立？

我认为您正在寻找css模块。CSS模块是仅应用于单个组件的CSS文件。下面是一个例子：。关于CSS模块的更多信息也可以在谷歌和其他论坛上找到

谢谢,

---

Caiden Sanders。

创建CSS规则时，使用类名而不是id通常更容易。例如：

.class {
 background-color: blue; 
}

当您跨多个组件拥有公共元素时，CSS颜色将对所有元素应用样式，例如：

p {
 background-color: blue; 
}

如果您想区分在一个组件中应用而不在另一个组件中应用的样式（我认为您正在尝试在您的案例中这样做），则需要使用id，而不是元素或类名

向要设置样式的组件添加id，并为该元素创建规则，例如：

#hero {
 background-color: bluel;
}

---

这应该能够确保CSS彼此不同。

在

React

中，当安装组件时，也会导入其特定的

CSS

文件。您应该知道，

React

只生成一个HTML页面应用程序。在一个HTML页面中，如果导入多个

CSS

文件，并且这些文件的CSS存在冲突，则将根据优先级应用

CSS

如果公共元素冲突，则最后出现的

CSS

将覆盖现有元素，除非您没有使用

！重要信息

包含任何属性

---

因此，您应该在需要时使用唯一的ID或类来防止冲突，如果您对某些元素有类似的行为，则应使用common

CSS

。

Hi，您可以提供一些代码片段吗？在React中将特定的类名放在组件的根级别是一种常见的做法，这使得控制CSS何时只应用于该组件变得更加容易。即使在React之外，在基本元素（如

form

）上全局设置CSS通常也只保留用于重置，如果您确定希望它始终适用；类名或ID是更安全的样式目标。使用css模块。