html - React 看不到 css 属性

Question

这里的问题是，在这种情况下，当我使用诸如“form-group”之类的内置标签时，CSS 样式不会应用到浏览器中。如果我输入自己的定义，例如“classes.form”，浏览器将看到 CSS。但是当我使用内置时，CSS 是不可见的。

当我去检查时，它显示了 .form-group.scss 的样式。但不是我自己的CSS。

我有以下代码。在这种情况下，内置标签是“form-group”。

<div className="form-group">
   <label htmlFor="email"></label>
    <Input
      type="text"
      className="form-control"
      placeholder="email"
      value={email}
      onChange={onChangeEmail}
      validations={[required, validEmail]}
    />
</div>

我的CSS：

.form-group {
margin-bottom: 0.2rem;
margin-top: 0.2rem;
}

标签： htmlcssreactjs

Answer 1

这可能是一个愚蠢的建议，但是您是否尝试过将 !important 附加到您的样式中？

.form-group {
  margin-bottom: 0.2rem !important;
  margin-top: 0.2rem !important;
}

!important应该覆盖默认样式并使用您传入的边距。

这里还有一个例子。