当 DevExtreme DataGrid 被禁用时，默认样式会导致文字颜色变浅、对比度不足，影响可读性；本文提供通过 CSS 覆盖与 onCellPrepared 事件双路径定制禁用态样式的专业方案。
当 devextreme datagrid 被禁用时，默认样式会导致文字颜色变浅、对比度不足，影响可读性；本文提供通过 css 覆盖与 `oncellprepared` 事件双路径定制禁用态样式的专业方案。
DevExtreme DataGrid 在禁用（disabled: true）时，会自动为容器添加 .dx-state-disabled 类，并应用内置的低透明度文本样式（如 color: rgba(0,0,0,0.38)），导致内容难以辨识。仅靠简单类名拼接（如 <div className=".dx-datagrid.dx-state-disabled">）无法生效，且原始 CSS 中使用的 .dx-datagrid-disabled 并非 DataGrid 默认生成的类名——这是关键误区。
✅ 正确做法分两步：
1. 使用官方支持的禁用状态选择器（推荐优先级高、维护性好）
DataGrid 启用 disabled: true 后，会在根元素上添加 dx-state-disabled 类，同时保留 dx-datagrid。因此应使用以下 CSS 规则精准覆盖：
/* 全局禁用态样式：确保字体清晰、背景可辨 */
.dx-datagrid.dx-state-disabled {
opacity: 1 !important; /* 防止父级透明度干扰 */
}
.dx-datagrid.dx-state-disabled .dx-datagrid-content .dx-row > td,
.dx-datagrid.dx-state-disabled .dx-datagrid-headers .dx-header-row > th {
color: #333 !important; /* 深灰文字，保障可读性 */
background-color: #f9f9f9 !important;
}
.dx-datagrid.dx-state-disabled .dx-datagrid-content .dx-row {
border-bottom: 1px solid #eee !important;
}
.dx-datagrid.dx-state-disabled .dx-datagrid-headers {
background-color: #f5f5f5 !important;
}⚠️ 注意：避免使用 !important 过度，但 DevExtreme 内部样式权重较高，首次定制时合理使用可确保生效；后续可通过 customizeElement 或主题构建减少依赖。
2. 动态控制单元格样式：onCellPrepared 事件（适用于条件性高亮）
若需在禁用状态下对特定列、行或状态做精细控制（如将“状态”列标红、“金额”列加粗），可结合 onCellPrepared：
<DataGrid
disabled={this.state.disabledGrid || this.disabled()}
onCellPrepared={(e) => {
if (e.component.option("disabled") && e.rowType === "data") {
// 所有数据单元格统一加深文字
e.cellElement.css("color", "#212529");
e.cellElement.css("font-weight", "normal");
// 示例：对 'status' 字段特殊处理
if (e.column.dataField === "status" && e.value === "error") {
e.cellElement.css({
color: "#d32f2f",
fontWeight: "bold"
});
}
}
}}
// ... 其他配置
/>? 补充建议：
- 不要手动在父容器上拼接 .dx-state-disabled 类——DataGrid 会自动管理该类，只需监听其 disabled 属性即可；
- 若使用自定义主题（如 generic.light），建议通过 DevExtreme Theme Builder 导出并修改 $disabled-text-opacity 变量，实现全局一致性；
- 移动端需额外测试禁用态触摸反馈，可补充 pointer-events: none 配合视觉降级。
通过 CSS 精准覆盖 + 事件动态增强，既能保证禁用态信息清晰可读，又兼顾可维护性与扩展性，彻底解决“看不清”的体验痛点。
