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
}
}
},