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,

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

主题所有属性表

### 如何在 Ant Design 中实现自定义图片 在 Ant Design 中,可以通过多种方式来定制和展示图片。以下是几种常见的方法: #### 使用 `Avatar` 组件显示圆形或方形图片 Ant Design 提供了一个灵活的 `Avatar` 组件用于显示头像或其他小型图像。可以设置不同的形状、大小以及加载本地资源或网络链接。 ```jsx import { Avatar } from 'antd'; import React from 'react'; const App = () => ( <> <Avatar size={64} src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> {/* 更多配置 */} </> ); ``` 此代码片段展示了如何通过指定 URL 来作为源文件路径[^1]。 #### 利用 `Image` 组件处理更复杂的场景 对于更加复杂的需求,比如响应式设计或是带有占位符效果的情况,则推荐使用专门针对这些需求而优化过的 Image 组件。 ```jsx import { Image } from 'antd'; import React from 'react'; const App = () => ( <div> <Image width={200} src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstKYdIeTNcNMkWdv.png" placeholder={<img alt="" src="path_to_placeholder_image.jpg"/>} /> </div> ); ``` 这段示例说明了当图片未加载完成前可以用什么替代内容填充,并且指定了宽度属性让其适应不同设备下的布局要求[^2]. #### 自定义样式与类名应用 如果希望进一步调整外观,还可以借助 CSS 或者直接给组件传递 className 属性来自定义样式表单中的特定规则集;另外也可以利用 styled-components 这样的工具库来进行更为精细的设计控制。 ```css /* 定义外部CSS */ .custom-image { border-radius: 8px; } /* 应用到组件上 */ <Image preview={false} className='custom-image' src="..." /> ``` 上述例子中介绍了两种途径去修改默认视觉表现形式——一种是编写独立的选择器声明并附加至目标元素之上;另一种则是采用流行的第三方解决方案之一,在 JavaScript 文件内部创建内联样式的封装体[^3].
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值