如何在React中覆盖实现CSS

Question

我正在使用React构建简单的应用程序，并使用Materilize CSS。在我的UserProfile Component类中，导入UserProfile.css import "./UserProfile.css。

/* UserProfile.css */ 

.custom-class {
  margin-top: 30 !important;
  color: pink;
}

render方法中的UserProfile有

<h1 className="custom-class">Title</h1> // Margin is not applyed, but color is pink

我可以选择  

<h1 style={{ marginTop: 30, color: "pink" }}>Title</h1> 

这很好用，但是我更喜欢css文件中的样式代码。

我不确定这个问题是否与覆盖无关。

Answer 1

您将需要使用camelCase作为类名，因此使用.customClass而不是.custom-class。

然后您的导入语句应如下所示：

import css from './UserProfile.css`;

以及您的组件中：

<h1 className={css.customClass}>Title</h1>

在CSS Modules上阅读以获取更多信息。

Answer 2

您应该在css文件中使用px，将代码更改为margin-top: 30px !important;，它应该可以工作。

如果要检查CSS中的主要问题，则可以检查代码（右键单击浏览器并选择“检查”），然后检查代码是否交叉。

Answer 3

css类中没有margin-top的单位

.custom-class {
  margin-top: 30px !important;
  color: pink;
}