最前端丨如何在 Antd Pro 框架上实现样式自定义？

Ant Design Pro是一个企业级的中后台前端/设计解决方案，具有完整的UI组件和设计风格。针对特定项目需要对其UI设计进行调整，例如改变主题色、布局和卡片等。本期内容旨在探讨如何对Ant Design的组件进行样式上的调整，不涉及Antd设计系统的探讨，而是分享样式修改的方法。

全局修改

演示环境包括 ant design vue 1.7.8、 vue antd pro 3.0.2、 less和 vue/cli 4.5.17。通过集中在vue.config.js修改全局变量，可以对 Antd已定义的变量进行全局修改。例如，可以改变主题色、边框半径、菜单背景色等。

超出变量外的修改

对于Antd组件样式的其他覆盖，可以在src/global.js里实现，或者自定义文件并在main.js中引入。需要注意的是，由于组件的css使用 less，可能需要按照原组件的样式层级结构进行修改，以解决权重问题，而不推荐直接使用!important。

单页面修改

在单页面进行样式修改时，应避免影响全局样式，可以使用scoped属性实现局部样式。为了覆盖Antd组件样式，可以使用 scss或 less配合/deep/进行样式穿透，或使用 css配合其他选择器。