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 組件來說，這幾個變量足夠使用了，如還有其他大小自定義需求，可到上面樣式變量中查找