ant design自定义主题

主题修改位置

在这里插入图片描述

修改属性(只有几个常用写了注释)

	//照搬阿里云的样式写法
	Object.defineProperty(exports, "__esModule", { value: true });
exports.default ={
		'@font-size-sm': '18px',  						//sm字体大小
	    '@font-size-base': '18px',						//基本字体大小
	    '@primary-color': '#0070cc',					//主题色
	    '@border-radius-base': '0',
	    '@border-radius-sm': '0',
	    '@text-color': 'fade(#000, 65%)',
	    '@text-color-secondary': 'fade(#000, 45%)',
	    '@background-color-base': 'hsv(0, 0, 96%)',
	    '@success-color': '#1e8e3e',
	    '@error-color': '#d93026',
	    '@warning-color': '#ffc440',
	    '@info-color': '@primary-color',
	    '@danger-color': '@error-color',
	    '@processing-color': '@primary-color',
	    '@border-color-base': '#dedede',
	    '@border-color-split': '#dedede',
	    '@outline-width': '0',
	    '@outline-color': '#737373',
	    '@input-height-lg': '36px',
	    '@input-height-base': '32px',
	    '@input-height-sm': '24px',
	    '@input-hover-border-color': '#737373',
	    '@form-item-margin-bottom': '16px',
	    '@btn-default-bg': '#0070cc',  //按钮默认底色
	    '@btn-default-border': '#dedede',
	    '@btn-danger-color': '#fff',
	    '@btn-danger-bg': '@error-color',
	    '@btn-danger-border': '@error-color',
	    '@switch-color': '@success-color',
	    '@table-header-bg': '#fafafa',    //table头部底色
	    '@table-row-hover-bg': '#fafafa',	//table选中行底色
	    '@table-padding-vertical': '15px',
	    '@badge-color': '@error-color',
	    '@breadcrumb-base-color': '@text-color',
	    '@breadcrumb-last-item-color': '@text-color-secondary',
	    '@slider-rail-background-color': '@background-color-base',
	    '@slider-rail-background-color-hover': '#e1e1e1',
	    '@slider-track-background-color': '@primary-color',
	    '@slider-track-background-color-hover': '@primary-color',
	    '@slider-handle-border-width': '1px',
	    '@slider-handle-color': '#dedede',
	    '@slider-handle-color-hover': '#dedede',
	    '@slider-handle-color-focus': '#dedede',
	    '@slider-handle-color-tooltip-open': '#ddd',
	    '@slider-handle-color-focus-shadow': 'transparent',
	    '@slider-handle-shadow': '1px 1px 4px 0 rgba(0,0,0,.13)',
	    '@alert-success-border-color': '#dff4e5',
	    '@alert-success-bg-color': '#dff4e5',
	    '@alert-info-border-color': '#e5f3ff',
	    '@alert-info-bg-color': '#e5f3ff',
	    '@alert-error-border-color': '#fcebea',
	    '@alert-error-bg-color': '#fcebea',
	    '@alert-warning-border-color': '#fff7db',
	    '@alert-warning-bg-color': '#fff7db',
	    '@radio-button-bg': 'transparent',
	    '@radio-button-checked-bg': 'transparent',
	    '@progress-radius': '0',
	    '@tabs-card-gutter': '-1px',
	    '@tabs-card-tab-active-border-top': '2px solid @primary-color',
	    '@layout-body-background': '#fafafa',  //body底色
    }

使用

//这里偷懒下载阿里的主题再修改
yarn add @ant-design/aliyun-theme
import aliyunTheme from '@ant-design/aliyun-theme';
//替换them 
theme: aliyunTheme,

在这里插入图片描述
所有属性

主题所有属性表

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值