找ant组件库对应样式

news/2025/10/10 14:42:55/文章来源:https://www.cnblogs.com/BKYNEKO/p/19133012

我的项目里面定义这个样式是.ant-tag {
background-color: #F2F3F5;
color: #1D2129;
border-color: #F2F3F5;
}，我想在Ant Design Vue 的github找到对应的地方看看样式一不一样，我该怎么找，而且这个样式是以什么语言形式出现的，直接搜.ant-tag找不到

提出的这个问题非常好，这说明您已经开始深入探索UI库的底层工作原理了。您直接搜索 .ant-tag 找不到是完全正常的，原因在于 Ant Design Vue 的样式并非用纯 CSS 编写。

1. 样式是什么语言？—— Less

Ant Design Vue 的组件样式是使用 Less 语言编写的。

Less 是一种 CSS 预处理器，您可以把它看作是“增强版”的CSS。它在CSS的基础上，增加了变量、嵌套、混入（Mixin）等编程特性，让CSS的编写和维护更加高效和模块化。

代码最终会通过工具（如 Vite 或 Webpack）被编译成浏览器可以识别的普通 CSS。

为什么直接搜索 .ant-tag 找不到？

因为在 Less 源码中，类名通常是通过变量拼接而成的，以方便统一管理和修改前缀。例如，源码中可能是这样写的：

Less 

// 定义一个前缀变量
@ant-prefix: ant;// 使用变量来构建类名
.@{ant-prefix}-tag {// ... 样式 ...
}

这段代码最终会被编译成：

CSS 

.ant-tag {/* ... 样式 ... */
}

所以，您搜索最终的产物 .ant-tag，是搜不到源码的。

2. 如何在 GitHub 上找到 `Tag` 组件的样式源码

请按照以下步骤，您就能精准地找到任何一个组件的样式文件：

第一步：前往 Ant Design Vue 的 GitHub 仓库

地址：https://github.com/vueComponent/ant-design-vue

第二步：导航到组件目录 `components`

Ant Design Vue 的所有组件源码都存放在根目录下的 components 文件夹中。请点击进入。

第三步：找到 `tag` 组件文件夹

在 components 文件夹内，所有组件都以其名称命名。向下滚动，找到并点击 tag 文件夹。

第四步：定位样式文件 `style/index.less`

在 tag 文件夹内部，您会看到组件的 .vue 文件和 style 等文件夹。

点击进入 style 文件夹。
在 style 文件夹中，您会找到 index.less 文件。

这个 index.less 文件，就是 Tag 组件的核心样式源文件。

直达链接：ant-design-vue/components/tag/style/index.less

第五步：分析 `index.less` 文件内容

打开这个文件，您会看到类似这样的代码，这正是您要找的 .ant-tag 的原始定义：

Less 

// 引入全局/主题变量文件
@import '../../style/themes/default';
@import '../../style/mixins/index';// 定义 tag 组件的类名前缀
@tag-prefix-cls: ~'@{ant-prefix}-tag';// .ant-tag 的基础样式
.@{tag-prefix-cls} {.reset-component; // 重置组件样式display: inline-block;height: auto;margin-right: 8px;padding: 0 7px;font-size: @tag-font-size; // 使用变量line-height: @tag-line-height; // 使用变量white-space: nowrap;background: @tag-default-bg; // <-- 您关心的背景色，也是一个变量border: @border-width-base @border-style-base @border-style-base;border-radius: @tag-border-radius; // 使用变量opacity: 1;transition: all 0.3s;// ... 更多样式 ...
}

分析结论：

类名是变量：.ant-tag 是由 @tag-prefix-cls 这个变量生成的。
颜色是变量：您看到的 background-color、color 等属性的值，几乎都是 @tag-default-bg、@primary-color 这样的变量。这些变量的真实颜色值定义在 theme 文件夹的全局主题文件中。