css - 如何在 React 中覆盖物化 css

Question

我正在使用 React 构建简单的应用程序，并使用 Materilize css。在我的 UserProfile 组件类中导入 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

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

如果你想检查 css 中的重写问题，你可以检查你的代码(右键单击你的浏览器并选择检查)并检查它是否交叉。