基于antd修改常用的样式
Table表格--pagination分页-expand展开-select选中
.ant-table {
background: none;
color: #fff;
}
.ant-table-tbody > tr.ant-table-row-selected > td {
background: none;
border-color: #fff;
}
.ant-table-thead>tr>th {
background: rgba(240, 240, 240, 0.3);
color: #fff;
text-align: center;
height: 40px;
}
.ant-table-tbody {
background: rgba(255, 255, 255, 0.1);
text-align: center;
}
.ant-table-tbody>tr.ant-table-row:hover>td {
background: none !important;
}
.ant-table-thead > tr > th, .ant-table-tbody > tr > td, .ant-table tfoot > tr > th, .ant-table tfoot > tr > td {
padding: 8px 8px;
}
.ant-pagination .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link,
.ant-pagination-item {
background: none;
background-color: none;
color: #ffffff;
}
.ant-form-item-control-input {
max-width: 593px;
}
.ant-table-footer {
padding: 10px 10px;
}
.ant-table.ant-table-bordered > .ant-table-footer {
background: none;
border: none;
color: #fff;
}
.ant-pagination-item {
a {
color: #fff;
}
}
.ant-pagination-item-active {
background: #1890ff ;
a {
color: #fff;
}
}
.ant-pagination-total-text {
color: #fff;
}
.ant-pagination-jump-prev .ant-pagination-item-container .ant-pagination-item-ellipsis,
.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis {
color: #fff;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background: none;
color: #fff;
}
.ant-pagination-item-link {
border: none;
}
.ant-select-arrow {
color: #fff;
}
.ant-form-item-control-input {
max-width: 593px;
}
tr.ant-table-expanded-row > td {
background: rgba(240, 240, 240, 0.3);
padding: 15px !important;
}
td.ant-table-column-sort {
background: none !important;
}
Select下拉选择框
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background: rgba(255,255,255,0.3);
border-radius: 4px;
border: 1px solid #DCDCDC;
color: #fff;
}
.ant-select-dropdown {
background-color: #858585;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: rgba(236,242,254, 0.6);
color: #0069D6;
}
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
background-color: rgba(236,242,254, 0.6);
color: #0069D6;
}
Modal弹窗
.ant-modal-header {
background: rgba(0,0,0,0.8);
}
.ant-modal-title {
color: #fff;
font-weight: 400;
}
.ant-modal-close-x {
color: #fff;
}
.ant-modal-body {
background: rgba(0,0,0,0.8);
color: #fff;
}
.ant-modal-footer {
background: rgba(0,0,0,0.8);
}
Layout--Slider
.ant-menu-inline .ant-menu-submenu-title {
margin-top: 0px;
margin-bottom: 0px;
background: rgba(0, 45, 94) !important
}
.ant-layout-header {
height: 60px;
line-height: 60px;
padding: 0 30px;
color: #333;
// box-shadow: 0px 3px 3px #ddd;
background: #002D5E;
z-index: 1;
display: flex;
justify-content: space-between;
font-size: 14px;
position: fixed;
width: 100%;
}
.ant-menu {
font-size: 14px;
color: #fff;
background: #002D5E !important;
// border: 1px solid rgba(226,231,233,0.2);
}
// .ant-menu:not(.ant-menu-horizontal) .ant-menu-item {
// background-color: #002D5E;
// }
.ant-menu-light .ant-menu-item:hover {
color: #fff;
background-color: #004DA1;
}
.ant-menu-submenu-selected {
color: #fff;
background-color: #004DA1;
}
.ant-menu-submenu-arrow {
color: #fff;
}
.ant-menu-light .ant-menu-submenu-title:hover {
color: #fff;
}
.ant-menu-light .ant-menu-submenu-active {
color: #fff;
}
.ant-menu-submenu-title:active {
background: none;
}
.ant-menu-submenu:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow {
color: #fff;
}
.ant-menu-submenu-title:focus-visible {
box-shadow: none;
}
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
background-color: #004DA1;
}
.ant-menu-item-selected {
color: #fff;
}
.ant-layout-sider {
height: 100vh;
width: 240px;
padding-top: 60px;
background: #fff;
box-shadow: 1px 3px 3px #ddd;
}
.ant-layout-content {
background-color: #fff;
}
Breadcrumb面包屑
<div className={styles.breadcrumb}>
<Breadcrumb separator=">">
<Breadcrumb.Item>阵地选址</Breadcrumb.Item>
<Breadcrumb.Item>
{}
新建方案
</Breadcrumb.Item>
</Breadcrumb>
</div>
.breadcrumb {
position: absolute;
top: 0;
left: 0;
height: 40px;
line-height: 40px;
display: flex;
align-items: center;
padding-left: 16px;
background: #fff;
}
Tabs标签---card
.ant-tabs {
padding-left: 16px;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
background: rgba(255,255,255,0.4);
border-radius: 3px 3px 0px 0px;
color: #fff;
}
.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active {
background: rgba(0,0,0,0.7);
}
.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before {
border: none;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: #fff;
}
Tabs---标签页--默认
.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before {
border-bottom: 0px;
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab {
margin-right: 10px;
}
.ant-tabs-tab-btn {
color: #fff;
}
.ant-tabs-nav-wrap {
justify-content: center;
}
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
color: rgb(24 144 255);
}
.ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab{
margin-left: 0px;
border-left: 0px;
}
.ant-tabs-tab {
margin: 0 36px;
}
输入框
// 默认输入框
.ant-input {
background: rgba(255, 255, 255, 0.4);
border: none;
border-radius: 0;
color: #fff;
}
.ant-input-status-error:not(.ant-input-disabled):not(.ant-input-borderless).ant-input {
background-color: rgba(255,255,255,0.4);
}
// 带后缀(单位)输入框
.ant-input-affix-wrapper {
background: rgba(255, 255, 255, 0.4);
border: none;
border-radius: 0;
color: #fff;
.ant-input {
background: none;
}
}
.ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
background-color: rgba(255,255,255,0.4);
}
