antd作为react中最常用的ui库，使用频率之高几乎遍布大小项目，而有时某些页面需要自定义配色，通常采用global注入，下面给出一些常用控件的样式css。
- 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;
}
}
}
- 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);
}
}
}
}
- 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);
}
}
}
- 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;
}
}
}
- 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);
}
}
}
暂时就整理这些了，可能有些不全，但基本能满足需求了
