扩展Ant Design Pro 按钮 组件配色方案
- 鉴于原本的antdesign 按钮在主题下只有一套配色方案 且作者称为了标准不会扩展其他颜色 在此处扩展下并记录共享给大家。
- 基于antdesign pro 2.0 、2.1
- 调用方式如下使用class:
<Button type="primary" className="button-color-sunset" size="small">
已发布(未答题)
</Button>
- 只需要在 global.less里添加如下代码即可
这里是代码:
/* 扩展ant design pro按钮组件颜色 */ .button-color-dust { background-color: #F5222D; border-color: #F5222D; &:hover, &:focus { background-color: #ff4d4f; border-color: #ff4d4f; } &:active, &.active { background-color: #cf1322; border-color: #cf1322; } } .button-color-volcano { background-color: #FA541C; border-color: #FA541C; &:hover, &:focus { background-color: #ff7a45; border-color: #ff7a45; } &:active, &.active { background-color: #d4380d; border-color: #d4380d; } } .button-color-sunset { background-color: #FAAD14; border-color: #FAAD14; &:hover, &:focus { background-color: #ffc53d; border-color: #ffc53d; } &:active, &.active { background-color: #d48806; border-color: #d48806; } } .button-color-cyan { background-color: #13C2C2; border-color: #13C2C2; &:hover, &:focus { background-color: #36cfc9; border-color: #36cfc9; } &:active, &.active { background-color: #08979c; border-color: #08979c; } } .button-color-green { background-color: #52C41A; border-color: #52C41A; &:hover, &:focus { background-color: #73d13d; border-color: #73d13d; } &:active, &.active { background-color: #389e0d; border-color: #389e0d; } } .button-color-daybreak { background-color: #1890FF; border-color: #1890FF; &:hover, &:focus { background-color: #096dd9; border-color: #096dd9; } &:active, &.active { background-color: #40a9ff; border-color: #40a9ff; } } .button-color-geekblue { background-color: #2F54EB; border-color: #2F54EB; &:hover, &:focus { background-color: #1d39c4; border-color: #1d39c4; } &:active, &.active { background-color: #597ef7; border-color: #597ef7; } } .button-color-purple { background-color: #722ED1; border-color: #722ED1; &:hover, &:focus { background-color: #9254de; border-color: #9254de; } &:active, &.active { background-color: #531dab; border-color: #531dab; } }