antdesign Vue, using table form component and Descriptions description list component. Make a table, change the border style and font color style.

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>