在创建反应应用程序中覆盖 ant-design 的样式答案

【问题标题】：override styles for ant-design in create react app在创建反应应用程序中覆盖 ant-design 的样式
【发布时间】：2019-05-02 18:41:34
【问题描述】：

我在我的 CRA 应用程序中使用 ant-design，当我试图覆盖 ant 组件的样式时，我在 react 中给元素一个 className，但来自 ant 的样式总是会覆盖我的样式，只需要提供一个 ID工作。

CRA 应用程序不会被弹出，而是使用 Less 重新连接。

这是我想使用的方法但不起作用：

在反应组件中：

<Card className="my-classname"><Card>

在 index.css 中：

.my-classname { ... }

在谷歌搜索之后，我发现 className 不会覆盖 ant 设计，而是将 ant 与我的 css 样式结合起来。因此，在我试图覆盖 ant design 也指定的值的情况下，除非我使用 ID 规范，否则我的 css 将不会生效。

我现在的问题是我应该只使用 ID 以便我的所有 css 覆盖吗？

【问题讨论】：

我认为更好的方法是在 antd 提供的 css 上创建自己的样式表并将其导入组件中。样式表应该包含与 antd css 类名相同的类名。在此处查看示例codesandbox.io/s/pkxxr9n3xm

【解决方案1】：

我在浏览器中渲染的最终 html 代码玩了一下之后发现的解决方案是覆盖 antd 类的样式。例如：- 我想在项目中使用我的自定义卡片样式。所以，我为它覆盖了 ant-card-head。我们可以使用它覆盖任何其他类。您只需在浏览器中检查呈现的反应并找到与之关联的正确类。

.ant-card-head{
    border: 0;
    text-align: left;
}

【讨论】：