如何导入没有默认类名的 Ant Design 组件？答案

【问题标题】：How to import Ant Design components without default class names?如何导入没有默认类名的 Ant Design 组件？
【发布时间】：2020-01-23 23:23:15
【问题描述】：

我在我的反应项目中使用Ant Design。我想使用没有默认类名的 Ant Design 组件。

注意以下代码：

import { Typography } from "antd";

const { Title } = Typography;

~~

<Title level={4}> ...

原因如下：

<h4 class="ant-typography" ...

还有它的 CSS：

// in the less file:
h4.ant-typography {
    // some css
}

所以当我将我的类名添加到组件时，Ant Design 组件的类名的优先级高于我的！

我的班级名称是.root-23-07。此优先级编号为10，但由于在less 文件中使用标签名称，And Design CSS 选择的优先级编号为11。所以 Ant Design 样式会覆盖我的样式。

我想使用没有默认类名的 And Design 组件。 有可能吗？

【问题讨论】：

【解决方案1】：

如果我正确理解了您的问题，不，如果没有基础类名，您将无法使用 antd。因为 React 输出原始 html 和 css，没有类名将导致在您提供的 css 之外没有任何样式。

您需要使您的类与特异性级别相匹配，或者使用!important

【讨论】：

感谢您的努力，亲爱的 Matthew，使用 !important 是我解决此问题的最后一个解决方案，我这样做是为了发布项目。但我看到我们可以像 import Title from "antd/es/typography/Title" 或 import Title from "antd/lib/typography/Title" 一样导入 antd 组件。我猜可能这个导入不包含样式。
导入组件的方式不会影响样式。有两种加载样式的方法，您可以使用 import 'antd/dist/antd.css'; 或 import 'antd/es/button/style'; 之类的单个组件加载所有 antd css。无论哪种方式，一旦您导入这些样式，它们将存在于应用程序中的所有组件中。理论上你不能导入 antd css，但是你必须自己为所有组件编写样式。