外观配置

主题设置

组件库的变量

自定义变量结合了 ant design 组件库的设置，可以去主题编辑器里配置好 ant design 的组件库样式过后，复制配置好的 token 和 components 粘贴回平台：

Ant 的配置：

Ant Theme

粘贴 token 和 components 回平台的主题设置里：

Platform Theme

Ag Grid 主题变量

Table 组件使用了 Ag Grid，Ag Grid 支持的 CSS 变量配置可以配置在如下图 agGridCssVars 属性里。 Ag Grid 所有 CSS 变量列表可以去 CSS Variable Reference 查找。

CSS Vars

提示

注意：Ag Grid 的主题变量会影响整体表格的布局，如果有修改，一定要同时测试普通表格、可编辑表格，以及表格的列数很多的情况。例如，如果设置如下变量 "--ag-grid-size": "15px"，会让表头左右两侧的 padding 空白间距变得很大，默认表格列的最小宽度是 100px，会导致列只能显示 1 个文字。此时需要去调整表格列的最小宽度才能保证显示效果。

CSS Vars

其余的全局变量

除了组件库的设置以为，还有一些全局 CSS 变量可以自定义：

{
  /* 网站页面的背景颜色 */
  "--page-background-color": "#fff",
  
  /* Card 组件的阴影 */
  "--card-shadow": "rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px",
    
  /* Input、DatePicker 等组件下方的帮助文字的颜色 */
  "--helper-color": "#979797"
}

上述变量配置在如下图的 cssVars 属性里：

CSS Vars

CSS 自定义

当以上变量都不满足自定序需求的时候，可以在主题设置里写 CSS 去覆盖任何的样式：

Theme CSS

下面视频以修改 Tabs 字体大小为 18px 为例演示了如何修改 css：

配置示例

示例1

主题变量

{
  "token": {
    "borderRadius": 6
  },
  "components": {
    "Menu": {
      "colorBgContainer": "rgb(35, 22, 75)",
      "itemSelectedBg": "rgb(57, 43, 99)",
      "itemSelectedColor": "rgb(255, 255, 255)",
      "itemColor": "rgb(255, 255, 255)",
      "itemHoverColor": "rgb(246, 132, 67)",
      "itemHoverBg": "rgb(57, 43, 99)",
      "itemBg": "rgb(35, 22, 75)",
      "borderRadiusLG": 8,
      "fontSize": 12
    },
    "Button": {
      "fontSize": 12
    }
  },
  "cssVars": {
    "--helper-color": "rgb(178,109,10)"
  },
  "agGridCssVars": {
    "--ag-header-background-color": "white",
    "--ag-grid-size": "15px",
    "--ag-list-item-height": "20px"
  }
}

CSS

.site-logo {
  display: none
}

.table-auto-height {
  height: 100%;
}

.template-sidebar.template-sidebar {
  background-color: #23164B;
  color: #FFF
}

.difference-amount-input input:disabled {
  color: red;
  font-weight: bold;
}

.difference-amount-bold input:disabled {
  font-weight: bold;
}

.special-select .ant-select .ant-select-selection-item {
  font-weight: bold;
}


.difference-amount-sapn span {
  font-weight: bold;
}

i + span {
  padding: 4px 8px;
  border-radius: 20px;
  font-weight: 600;
}

i[style*="rgb(43, 135, 20)"] + span {
  color: #2B8714;
  background: #E7F8E8;
}

i[style*="rgb(36, 104, 191)"] + span {
  color: #2468BF;
  background: #EAF3FF;
}

i[style*="rgb(187, 124, 48)"] + span {
  color: #BB7C30;
  background: #FDF4E6;
}

i[style*="rgb(161, 22, 21)"] + span {
  color: #A11615;
  background: #FBE8E8;
}

i[style*="rgb(90, 90, 109)"] + span {
  color: #5A5A6D;
  background: #F2F2F4;
}

.ag-header-cell-text {
  font-size: 11px;
}

.ag-cell-value {
  font-size: 12px;
}

.icp-table-filter-item.icp-clickable.icp-center {
  font-size: 12px;
}

.ag-cell-value > span,
.ag-header-cell-text {
  color: rgb(120, 120, 145);
}

.company-card:hover {
  position: relative;
  top: -10px;
}

.report-header-list .list-item {
  width: 22%
}

@media print {
  .template-wrapper.template-wrapper.template-wrapper,
  .template-wrapper.horizontal {
    margin-left: 0;
    padding: 0;
  }

  .template-header.template-header {
    display: none;
    margin-top: 8px;
  }

  .report-template1 {
    padding: 0
  }

}

.color360 {
  background-color: rgba(255, 100, 100, 0.8);

}

.color0 {
  background-color: rgba(254, 255, 203, 1);
}

.color480 {
  background-color: rgba(208, 255, 230, 1);
}

.color960 {
  background-color: rgba(244, 248, 255, 1);
}

.component-error-line {
  border: 1px solid red !important;
}

.grid-width-fix {
  .grid-layout-item:empty {
    width: 0;
    padding: 0;
    margin: 0;
  }
}

.cellReadonly {
  pointer-events: none;
}

/* .ant-select-selection-item,
.ant-select-selection-item-content {
  user-select: all !important;
} */

.ant-collapse-header-text {
  font-size: 16px;
  font-weight: bold;
}

.erp-display-none {
  display: none
}

.erp-display-block {
  display: block !important;
}

.erp-display {
  display: none;
}

.form-element-with-autosize-title .field-title {
  flex: none;
  width: auto;
}

示例2

主题变量

{
  "token": {
    "borderRadius": 3,
    "colorPrimary": "#0089ce",
    "colorInfo": "#0089ce",
    "colorSuccess": "#52c41a"
  },
  "components": {
    "Menu": {
      "groupTitleColor": "rgb(0,0,0)",
      "itemSelectedColor": "rgb(255,255,255)",
      "itemColor": "rgb(0,0,0)",
      "itemSelectedBg": "rgb(0,137,206)",
      "itemBg": "rgb(255,255,255)",
      "itemHoverColor": "rgb(255,255,255)",
      "itemHoverBg": "rgb(0,137,206)",
      "itemBorderRadius": 0,
      "fontSize": 12
    },
    "Layout": {
      "bodyBg": "#f2f5fb"
    },
    "Button": {
      "fontSize": 12
    },
    "Pagination": {
      "marginXS": 8,
      "borderRadius": 2,
      "itemBg": "rgb(240,242,245)",
      "itemActiveBg": "rgb(0,137,206)"
    }
  },
  "cssVars": {
    "--helper-color": "rgb(178,109,10)"
  },
  "agGridCssVars": {
    "--ag-header-background-color": "white",
    "--ag-grid-size": "15px",
    "--ag-list-item-height": "20px",
    "--ag-odd-row-background-color": "#F2F5FA",
    "--ag-header-column-resize-handle-height": "100%",
    "--ag-cell-horizontal-border": ".5px solid #ebebeb"
  }
}

CSS

/* 菜单 */
.ant-menu-submenu-title {
  color: #000 !important
}

.ant-menu-submenu-title :hover {
  color: #fff !important;
}

/* 内容区域 */
.template-wrapper {
  background: #f2f5fb !important;
}

/* 表格操作列 */
.ag-cell-wrapper .table-action-cell .ant-btn-link {
  color: #058bcf;
}

/* 表格内容区域 */
.ag-root-wrapper-body {
  border-right: 1px solid #e8e8e8 !important;
  border-left: 1px solid #e8e8e8 !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* 折叠组 */
.ant-collapse {
  font-weight: 700;
}

/* 表头单元格间隔竖线 */
.ag-ltr .ag-header-cell-resize {
  right: -4px !important;
}

/* 表格固定右侧表头 */
.ag-pinned-right-header .ag-header-row .ag-header-cell .ag-header-cell-resize::after {
  left: 0;
}

/* 分页器选中页码 */
.ant-pagination .ant-pagination-item-active a {
  color: #fff;
}

/* 表格单元格附件 */
.ag-cell-wrapper .table-upload-cell {
  display: flex;
  align-items: center;
}

.ag-cell-wrapper .table-upload-cell a {
  font-size: 12px;
}

/* .ag-pinned-right-header, .ag-pinned-right-cols-container {
  box-shadow: -2px 2px 10px -3px #9A9DA0;
} */

.site-logo {
  display: none
}

.table-auto-height {
  height: 100%;
}

.template-sidebar .template-sidebar {
  /* background-color: #23164B; */
  color: #FFF
}

i + span {
  padding: 4px 8px;
  border-radius: 20px;
  font-weight: 600;
}

i[style*="rgb(43, 135, 20)"] + span {
  color: #2B8714;
  background: #E7F8E8;
}

i[style*="rgb(36, 104, 191)"] + span {
  color: #2468BF;
  background: #EAF3FF;
}

i[style*="rgb(187, 124, 48)"] + span {
  color: #BB7C30;
  background: #FDF4E6;
}

i[style*="rgb(161, 22, 21)"] + span {
  color: #A11615;
  background: #FBE8E8;
}

i[style*="rgb(90, 90, 109)"] + span {
  color: #5A5A6D;
  background: #F2F2F4;
}

.ag-header-cell-text {
  font-size: 11px;
}

.ag-cell-value {
  font-size: 12px;
}

.icp-table-filter-item.icp-clickable.icp-center {
  font-size: 12px;
}

.ag-cell-value > span,
.ag-header-cell-text {
  color: rgb(120, 120, 145);
}

.company-card:hover {
  position: relative;
  top: -10px;
}

.report-header-list .list-item {
  width: 22%
}

@media print {

  .template-wrapper.template-wrapper.template-wrapper,
  .template-wrapper.horizontal {
    margin-left: 0;
    padding: 0;
  }

  .template-header.template-header {
    display: none;
    margin-top: 8px;
  }

  .report-template1 {
    padding: 0
  }

}

.color360 {
  background-color: rgba(255, 218, 203, 1);
}

.color0 {
  background-color: rgba(254, 255, 203, 1);
}

.color480 {
  background-color: rgba(208, 255, 230, 1);
}

.color960 {
  background-color: rgba(244, 248, 255, 1);
}

.component-error-line {
  border: 1px solid red !important;
}

.grid-width-fix {
  .grid-layout-item:empty {
    width: 0;
    padding: 0;
    margin: 0;
  }
}

.cellReadonly {
  pointer-events: none;
}

/* //清除水平叠放中输入框的边框 */
.clear_StackInNumberInput_border .number-picker-element .ant-input-number {
  border: none;
}

/* 删除栅格空白展示 */
.grid-layout-item.grid-layout-item-span:empty {
  display: none;
}

/* .ant-select-selection-item,
.ant-select-selection-item-content {
  user-select: all !important;
} */

/* 处理合同的合并审批 */
.customer-contract-batch-approve {
  position: relative;
  bottom: -46px;
  left: -200px;
}

主题设置​

组件库的变量​

Ag Grid 主题变量​

其余的全局变量​

CSS 自定义​

配置示例​

示例1​

主题变量​

CSS​

示例2​

主题变量​

CSS​

主题设置

组件库的变量

Ag Grid 主题变量

其余的全局变量

CSS 自定义

配置示例

示例1

主题变量

CSS

示例2

主题变量

CSS