Antd is the most commonly used UI library in React. Antd is frequently used in large and small projects, and sometimes some pages require custom color matching. Global injection is usually used.

  1. Select
.select{
  :global {
    .ant-select-selection {
      background-color: rgba(35.251.254.0.15); border: 1px solid #2AC2C4 ! important; border-radius: 4px ! important; } .ant-select-selection__placeholder, .ant-select-arrow {opacity: 0.5;
      color: #FFFFFF;
    }

    .ant-select-selection-selected-value {
      color: #FFFFFF;
    }

    .ant-select-dropdown {
      background-color: #144352;
      border-radius: 4px;
      border: 0;
      box-shadow: 0 10px 32px 0 rgb(38 38 38 / 18%);
    }

    .ant-select-dropdown-menu-item:not(.ant-select-dropdown-menu-item-disabled) {
      color: #fff;

      &:hover {
        background-color: rgba(21.112.113.0.8);
      }
    }

    .ant-select-dropdown-menu-item-active {
      background-color: rgba(21.126.128.0.2);
    }

    .ant-select-dropdown-menu-item-selected {
      background-color: #157071; }}}Copy the code
  1. DatePicker
.time{

   :global {
     .ant-calendar-picker-input.ant-input {
       height: 36px;
       background-color: rgba(35.251.254.0.15); border: 1px solid #2AC2C4; border-radius: 4px ! important; } .ant-calendar-range-picker-input {color: #FFFFFF;
     }

     .ant-calendar-range-picker-input::placeholder, .ant-calendar-range-picker-separator, .ant-calendar-picker-icon {
       opacity: 0.5;
       color: #FFFFFF;
     }

     .ant-calendar-range-picker-separator {
       vertical-align: middle;
     }

     .ant-calendar-picker-container {
       top: 0! important; color: #fff; } .ant-calendar { background-color: #144352;
       border-radius: 4px;
       border: 0;
       box-shadow: 0 10px 32px 0 rgba(38.38.38.0.18);
     }

     .ant-calendar-input-wrap {
       height: auto;
       padding: 12px 12px 8px 12px;
       border: 0;
     }

     .ant-calendar-input {
       height: 28px;
       line-height: 28px;
       padding: 0 10px;
       background-color: rgba(35.251.254.0.15); border: 1px solid #2AC2C4; border-radius: 4px ! important; color: #FFFFFF; &::placeholder {opacity: 0.5;
         color: #FFFFFF;
       }
     }

     .ant-calendar-range-middle {
       padding: 0;
       margin-top: 8px;
       opacity: 0.5;
       color: #FFFFFF;
     }

     .ant-calendar-header {
       height: 36px;
       line-height: 36px;

       .ant-calendar-prev-year-btn, .ant-calendar-prev-month-btn, .ant-calendar-year-select, .ant-calendar-month-select, .ant-calendar-next-month-btn, .ant-calendar-next-year-btn, .ant-calendar-day-select {
         line-height: 36px;
         color: #fff;
         opacity: 0.5;
       }

       .ant-calendar-year-select, .ant-calendar-month-select, .ant-calendar-day-select {
         opacity: 1;
       }

       .ant-calendar-year-panel, .ant-calendar-month-panel, .ant-calendar-decade-panel {
         top: 48px;
         background-color: #144352;
       }

       .ant-calendar-month-panel-header {
         height: 36px;
         line-height: 36px;

         .ant-calendar-month-panel-prev-year-btn, .ant-calendar-month-panel-year-select, .ant-calendar-month-panel-next-year-btn {
           line-height: 36px;
           color: #fff;
           opacity: 0.5;
         }

         .ant-calendar-month-panel-year-select {
           opacity: 1;
         }
       }

       .ant-calendar-year-panel-header {
         height: 36px;
         line-height: 36px;

         .ant-calendar-year-panel-prev-decade-btn, .ant-calendar-year-panel-decade-select, .ant-calendar-year-panel-next-decade-btn {
           line-height: 36px;
           color: #fff;
           opacity: 0.5;
         }

         .ant-calendar-year-panel-decade-select {
           opacity: 1;
         }
       }

       .ant-calendar-decade-panel-header {
         height: 36px;
         line-height: 36px;

         .ant-calendar-decade-panel-prev-century-btn, .ant-calendar-decade-panel-century, .ant-calendar-decade-panel-next-century-btn {
           line-height: 36px;
           color: #fff;
           opacity: 0.5;
         }

         .ant-calendar-decade-panel-century {
           opacity: 1; }}a:hover {
         background-color: #157071;
         color: #fff;
       }
     }

     .ant-calendar-body, .ant-calendar-month-panel-body, .ant-calendar-year-panel-body, .ant-calendar-decade-panel-body, .ant-calendar-footer {
       border: 0;
     }

     .ant-calendar-header {
       .ant-calendar-decade-panel-decade, .ant-calendar-year-panel-year, .ant-calendar-month-panel-month {
         color: #fff;
       }

       .ant-calendar-decade-panel-selected-cell .ant-calendar-decade-panel-decade, .ant-calendar-year-panel-selected-cell .ant-calendar-year-panel-year, .ant-calendar-month-panel-selected-cell .ant-calendar-month-panel-month {
         background-color: #157071;
         color: #fff;
       }
     }

     .ant-calendar-date {
       color: #fff;

       &:hover, &:active {
         background-color: #157071;
       }
     }

     .ant-calendar-last-month-cell, .ant-calendar-next-month-btn-day, .ant-calendar-last-month-cell {
       .ant-calendar-date {
         color: #597D89;
       }
     }

     .ant-calendar-selected-start-date, .ant-calendar-selected-end-date {
       .ant-calendar-date {
         background-color: #157071;
       }
     }

     .ant-calendar-today .ant-calendar-date {
       border-color: #157071;
     }

     .ant-calendar-in-range-cell::before {
       background-color: rgba(21.112.113.0.4);
     }

     .ant-calendar-time-picker {
       top: 84px;
       height: 226px;
     }

     .ant-calendar-time-picker-panel {
       height: 262px;
       margin-top: -36px;
     }

     .ant-calendar-time-picker-inner {
       padding-top: 36px;
       border: 0;
     }

     .ant-calendar-time-picker-combobox {
       background-color: #144352;
       border: 0;
     }

     .ant-calendar-time-picker-select {
       border: 0;
     }

     .ant-calendar-time-picker-select-option-selected, .ant-calendar-time-picker-select li:hover {
       background-color: #157071;
       color: #fff;
     }

     .ant-calendar-time-picker-btn {
       color: rgba(35.251.254.0.8);
       transition: .3s;

       &:hover {
         color: rgba(35.251.254.1);
       }
     }

     .ant-calendar-ok-btn {
       background-color: rgba(35.251.254.0.2);
       border: 1px solid #23FBFE;
       border-radius: 4px;

       &:hover {
         background-color: rgba(35.251.254.0.4); }}}}Copy the code
  1. Modal
.modal{
  :global{
    .ant-modal-content{
      background-color: #144352;
    }
    .ant-modal-header{
      background-color: #144352;
      border-bottom: 1px solid rgba(255.255.255.0.20);
    }
    .ant-modal-title{
      color: rgba(255.255.255.0.85);
    }
    .ant-modal-close{
      color: rgba(255.255.255.0.85); }}}Copy the code
  1. tabel
.tablewrap{
  :global{
    .ant-table-thead > tr > th {
      border-bottom: none;
      border-right: none;
      color: rgba(255.255.255.0.85);
      background: #145A66;
    }
    .ant-table-hide-scrollbar{
      background: #145A66;
    }
    .ant-table-tbody > tr {
      background: rgba(35.251.254.0.30);
      color: #FFFFFF;
      > td{
        border-bottom: none;
      }
    }
    .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background-color: #126068;
    }

    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background-color: #126068; }}}Copy the code
  1. pagination
.pagination {
  margin: 16px auto 0;
  text-align: right;

  :global {
    .ant-pagination-item, .ant-pagination-next {
      margin-left: 8px;
    }

    .ant-pagination-item, .ant-pagination-prev, .ant-pagination-next {
      min-width: 22px;
      height: 22px;
      line-height: 22px;
      border: 0;

      & > a {
        border: 0;
        color: rgba(255.255.255.0.5)! important; transition: .3s ! important; &:hover {color: rgba(35.251.254.0.4) !important;
        }
      }
    }

    .ant-pagination-item.ant-pagination-item-active {
      background-color: rgba(35.251.254.0.4);

      & > a {
        color: #FFFFFF ! important; } } .ant-pagination-prev, .ant-pagination-next { &.ant-pagination-disabled > a {color: rgba(255.255.255.0.20) !important;
      }
    }

    .anticon-double-right {
      color: rgba(35.251.254.0.4);
    }

    .ant-pagination-item-ellipsis {
      color: rgba(255.255.255.0.5); }}}Copy the code

For the time being, these may be incomplete, but basically can meet the needs