记录：修改antd5全局样式

Joey_iSleepy

已于 2023-11-21 16:55:32 修改

阅读量2.3k

点赞数

分类专栏： javaScript 造轮子 antd 文章标签： react.js ui

于 2023-10-08 16:24:36 首次发布

本文链接：https://blog.csdn.net/qq_60178319/article/details/133684416

版权

javaScript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

antd

7 篇文章 0 订阅

订阅专栏

造轮子

5 篇文章 0 订阅

订阅专栏

antd5提供了ConfigProvide来修改全局样式，可以设置全局主题颜色，也可以修改单独的组件主题颜色，这里记录一下修改select组件默认颜色

1、首先在项目外层引入ConfigProvider ，并包裹app

2、在首页中，找到[主题编辑器](https://ant-design.antgroup.com/theme-editor-cn)，

在这里插入图片描述

3、根据项目需求修改对应属性

在这里插入图片描述

效果如下

在这里插入图片描述

import { ConfigProvider } from 'antd'

    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#00a2fb',
          borderRadius: 6,
          colorBgContainer: 'rgba(7, 59, 108,.6)'
        },
        components: {
          Select: {
            colorText: '#fff', 
            controlItemBgActive: 'rgba(0, 174, 255,.6)', //激活下的颜色
            controlItemBgHover: 'rgb(11, 73, 127)', //悬浮时的背景颜色
            colorBorder: '#00AEFF', //边框颜色   
            colorBgElevated: 'rgba(7, 59, 108,.4)', //浮层容器背景色 
            controlOutlineWidth: 0,  //空白
            colorTextQuaternary: '#fff', //按钮颜色 
            colorTextPlaceholder: '#fff', //控制占位文本的颜色 
            controlHeight:28,
          }
        }
      }}
    >
      <App />
    </ConfigProvider>

antd4 全局样式修改

// 全部样式参考
https://github.com/ant-design/ant-design/blob/4.x-stable/components/style/themes/default.less

vite.config.js 配置

  css: {
    postcss: './postcss.config.js',
    preprocessorOptions: {
      // 全局样式引入
      scss: {
        // 文件路径，注意最后需要添加 ';'
        additionalData: '@import "@/styles/mixin.scss";',
        javascriptEnabled: true
      },
      less: {
        modifyVars: {
          //全局样式
          /* select */
          'primary-color': '#00a2fb',
          'select-border-color': 'rgb(18, 91, 224,1)',
          'select-item-selected-color': '#fff', //选中字体颜色
          'select-dropdown-bg': 'rgba(2, 24, 81,.8)', // 悬浮层颜色
          'select-item-selected-bg': 'rgb(18, 120, 224,.7)',
          'select-item-active-bg': 'rgb(18, 120, 224,.7)', //选中项颜色
          'select-background': 'rgb(2, 31, 91,1)',
          'text-color': '#6BD2FF',
          'icon-color': '#fff', 
          /* table */
          'table-bg': 'rgba(2, 24, 81,0)',
          'table-header-bg': 'rgba(2, 24, 81,0)',
          'table-header-color': '#fff',
          'table-border-color': 'rgb(18, 91, 224,1)',
          'table-border-radius-base': '0.42vw',
          'table-row-hover-bg': 'rgb(2, 46, 108,.2)',
          'table-selected-row-hover-bg': 'rgb(2, 46, 108,.2)',
          'table-padding-vertical': '0.54vw', 
          'table-font-size':'0.82vw',
          /* pagination */
          'pagination-item-bg': 'rgba(2, 24, 81,0)',
          'pagination-item-bg-active': 'rgb(2, 46, 108,.2)',
          'pagination-item-disabled-color-active': 'rgb(2, 46, 108,.2)',
          'pagination-item-disabled-bg-active': 'rgb(2, 46, 108,.2)',
          'pagination-item-link-bg': 'rgba(2, 24, 81,0)', 
    
        },
        javascriptEnabled: true
      }
    }
  },