Ant Design 组件small、default、large自定义

Ant Design 组件small、default、large自定义

定制主题

项目中常见于Ant Design 的样式变量覆盖
下面是一些常用的通用变量

@ant-prefix: ant; // ant design 类名前缀
@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 链接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: rgba(0, 0, 0, 0.85); // 标题色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

详细可见
Ant Design 提供的全部样式变量

至于覆盖方式可见 定制主题

自定义 And Design 组件 small、default、large

如果详细看了上面 ant design 提供的全部样式变量，会发现下面这几个变量

@btn-height-base: 32px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;

@input-height-base: 32px;
@input-height-lg: 40px;
@input-height-sm: 24px;

覆盖以上变量便可以重置掉默认的 small、default、large 的大小

针对于常规的 Form 组件来说，这几个变量足够使用了，如还有其他大小自定义需求，可到上面样式变量中查找