Here is the default style of antdesign
What we want: darken the border color and darken the font color
Here I encapsulate a css file:
/*
打印弹窗的所有字体颜色加深,table 和 descriptions
*/
/deep/ .ant-descriptions-view table tbody tr th,
/deep/ .ant-descriptions-view table tbody tr td {
color: #000000 !important;
}
/deep/ .ant-table-column-title,
/deep/ .ant-table-body table tbody tr th,
/deep/ .ant-table-body table tbody tr td {
color: #000000 !important;
}
/*
打印弹窗的所有表格边框颜色加深 table 和 descriptions
*/
/deep/.ant-descriptions-bordered .ant-descriptions-view {
border-radius: 0;
border: 1px solid #333333 !important;
border-right: none !important;
}
/deep/ .ant-descriptions-bordered .ant-descriptions-row {
border-bottom: 1px solid #333333 !important;
}
/deep/ .ant-descriptions-bordered .ant-descriptions-row:last-child {
border-bottom: none !important;
}
/deep/ .ant-descriptions-bordered .ant-descriptions-item-label,
.ant-descriptions-bordered .ant-descriptions-item-content {
border-right: 1px solid #333333 !important;
}
.printModal /deep/ .ant-descriptions-item-content {
border-right: 1px solid #333333 !important;
}
.printModal /deep/ .ant-descriptions-item-content :last-child {
border-right: none !important;
}
.printModal /deep/ .ant-table-body table {
border: 1px solid #333333 !important;
border-right: none !important;
border-bottom: none !important;
border-radius: 0 !important;
}
.printModal /deep/ .ant-table-tbody>tr>td {
border-right: 1px solid #333333 !important;
border-bottom: 1px solid #333333 !important;
}
.printModal /deep/ .ant-table-thead>tr>th {
border-right: 1px solid #333333 !important;
border-bottom: 1px solid #333333 !important;
}
.printModal /deep/ .ant-table-thead>tr:first-child>th:last-child {
border-radius: none !important;
}
We use the style tag to import when we need the page, and use the scoped attribute to take effect only on the current page
<style scoped src="@/assets/css/printModal.css"></style>