antd 常见组件的样式修改

Button

---

.ant-btn {
  border-radius: 10px;
  height: 38px;
  line-height: 38px;
}
.ant-btn:hover {
  opacity: 0.7;
}
/* Button primary */
.ant-btn-primary {
  background: #0062FF;
  border-color: #0062FF;
}
.ant-btn-primary:hover {
  background: #0062FF;
  border-color: #0062FF;
  opacity: 0.7;
}
.ant-btn-primary:focus {
  background: #0062FF;
  border-color: #0062FF;
}

Select

.ant-select-selection {
  /* 选择框 样式 */
  border: none;
  border-bottom: 1px solid rgba(226,226,234,1);
  border-radius: 0;
}
.ant-select-selection.ant-select-selection--single {
  /* 选择框 click */
  border: none;
  border-bottom: 1px solid rgba(226,226,234,1);
  box-shadow: none;
}
.ant-select-selection.ant-select-selection--single:hover {
  /* 选择框 hover */
  border-color: rgba(0,98,255,0.7)
}
.ant-select-selection.ant-select-selection--single:focus {
  /* 选择框 focus */
  border-color: rgba(0,98,255,1)
}
.ant-select-dropdown {
  /* 下拉框 */
  border-radius: 10px;
  padding: 0;
}
.ant-select-dropdown-menu {
  /* 下拉框 Menu */
  padding: 0;
}
.ant-select-dropdown-menu-item {
  /* 下拉框 Menu.Item */
  font-family: 'PingFangSC-Medium,PingFang SC';
  border-radius: 10px;
  padding-left: 15px;
  height: 45px;
  line-height: 35px;
}

Checkbox

.ant-checkbox .ant-checkbox-inner {
  /* 默认样式 */
}
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  /* 部分选择 */
  background-color: #3DD598;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner {
  /* hover */
  border: 1px solid #3DD598;
}
.ant-checkbox-checked::after {
  /* checked + hover */
  border: none; /* 点击checked后 无动画 */
  border: 1px solid #3DD598;
}
.ant-checkbox-input:focus + .ant-checkbox-inner {
  /* checked + leave */
  border: 1px solid #3DD598 !important;
}
.ant-checkbox-checked .ant-checkbox-inner {
  /* checked */
  border: 1px solid #3DD598;
  background: #3DD598;
}

Dropdown

---

该样式可自己设置 class，直接修改样式

Modal 样式

.ant-modal-content {
  border-radius: 10px;
}
.ant-modal-header {
  height: 60px;
  border-radius: 10px 10px 0 0;
}
.ant-modal-title {
  font-size: 16px;
  font-weight: 500;
  font-family: PingFangSC-Medium,PingFang SC;
  color: rgba(68,68,79,1);
  line-height: 32px;
}
.ant-modal-body {
  padding: 20px;
  font-family: PingFangSC-Medium,PingFang SC;
}

Table

.ant-table {
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}
.ant-table-thead > tr > th {
  border: none;
  height: 52px;
  background: rgba(250,250,251,1) !important;
  padding: 0 16px;
  font-size: 16px;
  font-family: PingFangSC-Semibold,PingFang SC;
}
.ant-table-thead > tr > th:first-child {
  border-radius: 10px 0 0 10px;
}
.ant-table-thead > tr > th:last-child {
  border-radius: 0 10px 10px 0;
}

.ant-table-tbody > tr {
  background: rgba(255,255,255,1);
  font-size: 14px;
  font-family: Poppins-Regular,Poppins;
  font-weight: 400;
  color: rgba(23,23,37,1);
  height: 66px;
  box-sizing: border-box;
}
.ant-table-tbody > tr > td {
  background: rgba(255,255,255,1) !important;
  border-top: 1px solid rgba(255,255,255,1);
  border-bottom: 1px solid rgba(255,255,255,1);
  padding: 12px;
  height: 66px;
}
.ant-table-tbody > tr > td:first-child {
  border-left: 1px solid rgba(255,255,255,1);
  border-radius: 15px 0 0 15px;
}
.ant-table-tbody > tr > td:last-child {
  border-right: 1px solid rgba(255,255,255,1);
  border-left: none !important;
  border-radius: 0 15px 15px 0;
}
.ant-table-row-hover > td {
  border-color: rgba(61,213,152,1) !important;
}
.ant-table-row-hover > td:last-child {
  border-left: none !important;
}
/* pagination */
.ant-table-pagination.ant-pagination {
  margin: 90px 0 10px 0 !important;
}
.ant-pagination-options {
  margin-left: 10px;
}
.ant-pagination-options-size-changer.ant-select {
  margin-right: 0;
}
.ant-pagination-options .ant-select-selection {
  border-radius: 10px;
}
.ant-table-tbody .ant-table-selection-column {
  /* checkbox */
  padding-left: 11px;
}
/* 可编辑表格 样式 */
.editable-cell {
  position: relative;
}
.editable-cell-value-wrap {
  /* 可编辑字段 外层元素 */
  padding: 6px 12px 5px 5px;
  cursor: pointer;
}
.editable-row:hover .editable-cell-value-wrap {
  /* 可编辑表格 hover */
  padding: 6px 12px 5px 5px;
  min-height: 32px;
}
.ant-table-tbody .ant-input {
  /* 可编辑表格 Input样式 */
  font-family:Poppins-Regular,Poppins;
  color:rgba(23,23,37,1);
  border: none;
  border-bottom: 1px solid rgba(226,226,234,1);
  border-radius: 0;
  box-shadow: none !important;
  padding-left: 5px;
  padding-bottom: 0 !important;
}
.ant-table-tbody .ant-input:hover {
  /* border: none;
  border-bottom: 1px solid rgba(0,98,255,0.7) !important; */
}
.ant-table-tbody .ant-input:focus {
  border: none;
  border-bottom: 1px solid #d9d9d9 !important;
  padding-bottom: 0 !important
}

Alert

.ant-alert.ant-alert-no-icon {
  padding: 8px 15px;
}
.ant-alert-info {
  background:rgba(255,255,255,1);
  box-shadow:0 4px 10px 0 rgba(196,203,216,0.25);
}
.ant-alert {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  color: rgba(0,0,0,.65);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
  position: relative;
  padding: 8px 15px 8px 37px;
  word-wrap: break-word;
  border: none;
  border-radius: 10px;
  margin-bottom: 20px;
}

Input

/* 1、无边框带icon
   2、.borderNone 为自己定义 class */
.borderNone .ant-input {
  border: none;
}
.borderNone .anticon {
  color: #92929D;
}
.borderNone .ant-input-affix-wrapper .ant-input:hover {
  /* border: none;
  border-bottom: 1px solid rgba(0,98,255,0.7) !important;
  box-shadow: none; */
}
.borderNone .ant-input-affix-wrapper .ant-input:focus{
  border: none;
  border-bottom: 0 solid white !important;
  box-shadow: none;
}
.borderNone .ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 35px;
}