Antd默认样式修改

5,918 阅读2分钟

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

image.png

image.png

image.png

  // 图一样式
  .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);
    }

---希望能帮助到大家,后续有用到的继续补充