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

神州数码云基地 2023-01-17

698

前端开发

神州数码云基地

在前端开发上的尝试、调研与分享

本期内容

基于 AntD 定制化 CSS

Ant Design Pro 是一个企业级中后台前端/设计解决方案，已经有完善的 UI 组件及设计风格，在一些特定项目中，往往涉及到对其调整，来实现独特的 UI 设计，如不同的主题色、布局、卡片等，如何能够实现？

本期一起来跟大家探讨实践操作方法，本次不涉及探讨 Antd 设计系统，仅分享从哪些角度可以对组件进行样式修改。

实操过程

本次演示代码环境：

ant design vue 1.7.8

vue antd pro 3.0.2

less

vue/cli 4.5.17

全局修改

# 变量修改

Antd 官网介绍了几种修改已定义变量的方法，在项目里为了方便查看，我个人习惯集中修改 vue.config.js 。

这里可以对任何 Antd 已经定义好的变量进行全局修改。

css: {
  loaderOptions: {
    less: {
      modifyVars: {
        // less vars，customize ant design theme


        'primary-color': '#21B0AF',
        // 'link-color': '#F5222D',
        'border-radius-base': '2px',
        'layout-header-background': '#21B0AF',
        'menu-dark-item-active-bg': '#f3fbfb',
        'menu-dark-submenu-bg': '#21B0AF',
        'card-shadow': '0px 4px 28px rgba(68, 57, 168, 0.15)',
        'card-head-color': '#fff',
        'card-head-background': 'linear-gradient(180deg, #21B0AF 8.33%, #26D3D2 100%)',
      },
      // DO NOT REMOVE THIS LINE
      javascriptEnabled: true,
    },
  },
},

# 超出变量外的修改

对于超出变量外其余的样式覆盖，我通常选在 src/global.js 进行覆盖修改，也可以自己定义文件在 main.js 中引入。

需要注意的是，由于 Antd 组件 css 使用 less ，对控制台中仅选中元素类名修改会由于权重问题不生效，个人一般不建议直接使用 !important，可以参照原组件样式层级结构来修改。

// src/global.js 修改菜单样式
.ant-menu {
  &-dark&-inline &-item,
  &-dark&-inline &-submenu-title {
    border-radius: 20px 0 0 20px;
  }
  &-dark &-item-selected {
    > a,
    > a:hover {
      color: #21b0af;
    }
  }
  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
    border-radius: 20px 0 0 20px;
  }
}

单页面修改

单页面修改时需要避免对全局造成污染，需要使用 scoped 局部样式方案。

同时为了覆盖 Antd 组件类名，需使用 scss, less 搭配 /deep/ 进行样式穿透，或使用 css 搭配 <<< 进行样式穿透。

<style lang="less" scoped>
  .ant-pro-pages-account-projects-cardList {
    margin-top: 24px;


    deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }


    deep/ .ant-card-meta-description {
      height: 44px;
      overflow: hidden;
      line-height: 22px;
    }


    .cardItemContent {
      display: flex;
      height: 20px;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;


      > span {
        flex: 1 1;
        color: rgba(0,0,0,.45);
        font-size: 12px;
      }


      /deep/ .ant-pro-avatar-list {
        flex: 0 1 auto;
      }
    }
  }
</style>