记录:修改antd5全局样式

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
      }
    }
  },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值