1.修改antdv3组件默认样式
方法一:在组件外写一个div,修改这个div下组件的样式就不会更改全局的样式了;
方法二:style标签添加scoped,给每个样式加上::v-deep();
方法三:如果方法一和方法二不生效,只能使出秘密武器。设置组件的getContainer属性(有的组件是getPopupContainer),我们将原本渲染在#app外部的节点,手动挂载到了#app内部,之后再通过第二条的规则去设置就可以啦~
比如,修改modal的header部分的背景颜色,试了方法一和方法二都不生效。需要使用方法三,先通过挂载元素,再css穿透::v-deep(.ant-modal-body){} 修改样式。
//:getContainer="() => $refs.globalModal"
::v-deep(.ant-modal-header){
background: rgb(24, 27, 34) ;
border-bottom: 1px solid rgb(54, 61, 77);
}
2.修改antdv3鼠标悬浮表格某一行改变颜色
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
.ant-table-row-hover,
.ant-table-row-hover > td {
background-color: rgb(37, 45, 59) !important;
color: #ffffff;
}
.ant-table-fixed .ant-table-row-hover,
.ant-table-row-hover > td {
background-color: rgb(37, 45, 59) !important;
color: #ffffff;
}
3. 修改antdv3分页下拉框默认样式
.ant-pagination.mini .ant-pagination-options-quick-jumper {
color: #ffffff;
input {
background-color: rgb(31, 36, 44);
color: #ffffff;
}
}
.ant-pagination.mini .ant-pagination-item,
.ant-pagination.mini .ant-pagination-prev,
.ant-pagination.mini .ant-pagination-next {
background-color: rgb(31, 36, 44) !important;
color: #ffffff !important;
}
.ant-pagination.mini .ant-pagination-item-active a {
color: #ffffff !important;
background-color: #1890ff !important;
}
.ant-pagination.mini .ant-pagination-total-text {
color: #ffffff;
}
.ant-pagination.mini .ant-pagination-item a {
color: #ffffff;
}
.ant-select-dropdown {
background-color: rgb(46, 51, 59) !important;
color: #ffffff !important;
}
.ant-select-arrow {
color: #fff;
}
.ant-select-selector {
height: 24px;
border-radius: 4px;
background-color: transparent;
}
.ant-select-dropdown {
background-color: transparent;
.ant-select-item {
color: #fff;
&:hover {
background-color: rgb(31, 36, 44);
}
}
.ant-select-item-option-active {
background-color: rgb(46, 51, 59);
}
.ant-select-item-option-selected {
background-color: rgb(46, 51, 59);
}
}