Button
// 修改默认按钮样式
.ant-btn {
width: 160px;
height: 48px;
background: #bf1d0a;
border-color: #bf1d0a;
}
.ant-btn-primary {
background: #bf1d0a !important;
border-color: #bf1d0a !important;
}
//修改hover和点击效果样式
.ant-btn-primary:hover,
.ant-btn-primary:focus {
color: rgb(255, 255, 255);
background: #bf1d0a;
border-color: #bf1d0a;
}
Input
// 修改正常input样式
.ant-input {
height: 40px;
color: #fff;
background: rgba(17, 19, 26, 1);
border: 1px solid rgba(111, 152, 210, 0.3);
border-radius: 2px;
}
//修改disabled属性的input样式
.ant-input[disabled] {
color: #333;
}
// 修改hover效果
.ant-input:hover {
border-color: #bf1d0a;
border-right-width: 1px !important;
}
// 修改focus效果
.ant-input:focus,
.ant-input-focused {
border-color: #bf1d0a;
box-shadow: none;
}
// 修改textarea标签文本label不对齐样式问题
textarea.ant-input {
vertical-align: middle;
}
Select
// 修改hover效果边框颜色
.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
border-color: #bf1d0a;
}
// 聚焦时 边线颜色为红色
.ant-select-focused .ant-select-selector,
.ant-select-selector:focus,
.ant-select-selector:active {
border-color: #bf1d0a !important;
box-shadow: 0 0 2px #bf1d0a !important;
}
Radio
// 图一样式
.ant-radio-checked .ant-radio-inner {
border-color: #bd1d18;
}
// 图二样式
.ant-radio-inner::after {
background-color: #bd1d18;
}
// 图三hover效果
.ant-radio-wrapper:hover .ant-radio,
.ant-radio:hover .ant-radio-inner,
.ant-radio-input:focus + .ant-radio-inner {
border-color: #bd1d18;
}
Table
.ant-table {
max-height: 680px;
color: #fff;
}
.ant-table-small {
border-color: rgba(20, 45, 82, 1);
border-radius: 0;
}
.ant-table-thead > tr > th {
color: #fff;
background: none;
border-bottom: 1px solid rgba(20, 45, 82, 1);
}
.ant-table-tbody > tr > td {
border-color: rgba(20, 45, 82, 1);
}
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
background: rgba(8, 35, 92, 1);
}
Switch
.ant-switch {
background-color: #2d3b65;
}
.ant-switch-checked {
background-color: #2448ad;
}
Tab
.ant-tabs-bar {
margin: 0;
border: none;
}
.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
padding: 0;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
font-size: 16px;
font-family: PingFang SC;
line-height: 3.3;
background: none;
border: none;
}
.ant-tabs-nav .ant-tabs-tab-active {
color: rgba(255, 255, 255, 1) !important;
border-bottom: 3px solid #50fffeff !important;
}
Pagination
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link,
.ant-pagination-item {
color: #fff;
background-color: #0d376b;
border: none;
}
.ant-pagination-item a {
color: #fff;
font-weight: bold;
font-size: 14px;
font-family: PingFang SC;
}
.ant-pagination-item-active a {
color: #0387c7;
}
.ant-pagination-item-container .ant-pagination-item-ellipsis {
color: #fff;
}
Empty
.ant-empty-description {
color: #fff;
}
DatePicker
.ant-picker-range {
background: rgb(6, 21, 65);
border-color: rgb(22, 78, 135);
}
.ant-picker-input > input {
color: #fff;
}
.ant-picker-suffix {
color: rgb(55, 196, 255);
}
.ant-picker-separator {
color: rgb(55, 196, 255);
}
---希望能帮助到大家,后续有用到的继续补充