Vue Ant Design 样式穿透技巧：自定义样式的奥秘

2023-11-06 00:08:48

深度剖析 Ant Design 样式修改的神器：/deep/ 和自定义主题

一、Ant Design 样式修改的挑战

在 Vue 项目中引入 Ant Design 时，你可能会发现修改其样式并非易事。这是因为 Ant Design 采用 CSS 模块化的设计方式，样式被封装在组件内部，并通过类名引用。这意味着，直接修改组件的 CSS 文件可能会导致样式覆盖不彻底或升级后丢失。

二、/deep/ 的强大穿透力

为了应对上述挑战，Ant Design 提供了 /deep/ 这个秘密武器。它是一个特殊的 CSS 选择器，可以穿透组件内部样式，直接选择组件内部的元素。有了它，你就可以轻松修改组件样式，不必担心覆盖不彻底或丢失问题。

三、/deep/ 的使用示例

/deep/ .ant-form-explain {
  line-height: 1rem;
  margin: 1.5px 0;
}

这段 CSS 规则将修改所有 Ant Design 表单组件的说明文本样式，使其行高为 1rem，垂直间距为 1.5px。

四、/deep/ 的使用注意事项

虽然 /deep/ 非常强大，但在使用时也需要注意以下几点：

范围问题： /deep/ 可能会影响组件的封装性，导致样式泄漏到其他组件中。因此，在使用 /deep/ 时，要注意选择器范围，避免选择过多元素。
兼容性： /deep/ 在某些浏览器中可能不兼容，因此在使用前需要确认浏览器兼容性。
升级失效： 在组件升级后，/deep/ 选择器可能会失效，需要重新修改样式。

五、自定义主题：更优雅的修改方式

如果你追求更优雅的样式修改方式，不妨考虑 自定义主题 。它允许你通过修改主题变量来修改框架样式，而无需直接修改组件 CSS 文件。这使得样式修改更加容易和灵活。

六、自定义主题的使用示例

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import App from './App.vue'

// 创建一个自定义主题
const customTheme = {
  'primary-color': '#0080ff',
  'border-radius-base': '4px',
}

// 将自定义主题应用到组件库
Antd.use(createApp(App), { theme: customTheme })