如何自定义antd-design-vue组件的主题?

Question

如何自定义antd-design-vue组件的主题?

Answer 1

你好，关于antd-design-vue的样式如何自定义，可以根据以下步骤进行配置：

由于组件库使用的是less，所以项目需要支持less，安装less,less-loader即可。

1、新建主题文件theme.less

@primary-color: #1ca692; // 全局主色
@link-color: #1ca692; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
@primary-menu-color: #d8e6e1;
@primary-menu-font-color: #1ca692;

2、vite.onfig.ts配置

css: {
  preprocessorOptions: {
    less: {
        javascriptEnabled: true,
        modifyVars: {
            hack: 'true; @import "@/assets/css/theme.less"',
        },
    },
  },
}

3、在main.ts中引入

import '@/assets/css/theme.less';

Answer 2

推荐使用通过vue.config.js配置Less变量的方法。

实现

• 项目使用 Vue CLI 或 Vite。已安装 antd-design-vue 和 less：

npm install antd-design-vue less less-loader --save

• 配置 vue.config.js在项目根目录下创建或修改 vue.config.js，添加以下内容：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1890ff', // Ant Design 默认蓝，常用且美观
            'link-color': '#1890ff',    // 链接颜色与主色调一致
            'border-radius-base': '4px', // 默认圆角，简洁现代
            'font-size-base': '14px',   // 默认字体大小，适中
          },
          javascriptEnabled: true,     // 必须开启
        },
      },
    },
  },
};

• 应用保存后，重启开发服务器（npm run serve），主题会立即生效。

Answer 3

https://antdv.com/docs/vue/customize-theme

主题编辑预览