如何调整DevExtreme <dx-tree-view>（normal复选框模式）的复选框大小

要解决dx-tree-view中复选框缩小后勾选标记不匹配的问题，需要同时调整复选框容器和内部勾选图标的样式，具体代码如下：

核心CSS样式 #

/* 设定复选框容器的宽高为15px */
.dx-tree-view .dx-checkbox-icon {
  width: 15px;
  height: 15px;
}

/* 调整内部勾选标记的大小和适配方式 */
.dx-tree-view .dx-checkbox-icon .dx-checkbox-checkmark {
  width: 100%;
  height: 100%;
  transform: scale(0.8); /* 缩放比例可按需调整，让勾选标记在容器内显示更协调 */
}

补充半选状态适配（可选） #

如果你的树形组件用到半选状态，还需要补充以下样式确保横线显示正常：

.dx-tree-view .dx-checkbox-icon.dx-checkbox-indeterminate .dx-checkbox-checkmark {
  width: 100%;
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
}

说明 #

• 用.dx-tree-view前缀限定样式作用范围，避免影响页面中其他独立的dx-checkbox组件
• 若不想用缩放，也可以直接固定勾选SVG的尺寸并调整位置，示例：

.dx-tree-view .dx-checkbox-icon svg {
  width: 12px;
  height: 12px;
  position: relative;
  top: 1px;
  left: 1px;
}

内容的提问来源于stack exchange，提问作者kassfb