css - 如何向 Ant Design 和 React 应用程序添加样式

我在 Reactjs 堆栈中使用 Ant 设计。我希望这个问题不会太宽泛，并且在类似情况下很常见。

我在覆盖某些 CSS 时遇到问题。我想修改 .ant-layout-header 类，使其使用更少的填充。我在 antd.css @import '../node_modules/antd/dist/antd.css' 中找到了需要修改的样式；

我把它从

padding: 0 50px;

至

padding: 0 25px;

当我在保存后查看浏览器中的代码时，它看起来好像没有任何变化。我发现我的更改现在在它自己的标签中，看起来像：

.Dashboard__ant-layout-header___3h1_L

'.Dashboard__' 添加在开头，'___3h1_L' 添加到末尾。

在这一点上，我不完全理解为什么会发生这种情况。有没有人见过这种事情发生？如果是这样，我如何在不获取这些额外类的情况下对现有 CSS 进行更改？

标签： cssreactjslessantd