Devextreme DataGrid禁用后显示模糊无法读取的问题解决咨询

首先明确你当前实现里的核心问题：

• 你给父元素添加的类是.dx-datagrid.dx-state-disabled（这是CSS选择器写法，不是类名），但自定义CSS用的是.dx-datagrid-disabled，类名完全不匹配，导致自定义样式根本没生效。
• DevExtreme默认的禁用状态会给元素设置opacity（透明度）属性，这是内容模糊的直接原因。

修正步骤： #

1. 正确设置禁用状态（推荐用组件自带属性）

直接使用DataGrid组件内置的disabled属性，比父元素包裹加类更规范，组件会自动处理状态类：

<Grid 
  disabled={this.state.disabledGrid || this.disabled()}
  // 其他原有属性...
/>

如果坚持用父元素包裹的方式，要修正类名（去掉类名里的.，className只填类名）：

<div className={this.state.disabledGrid || this.disabled() ? 'dx-state-disabled' : ''}>
    <Grid {/* 其他属性 */} />
</div>

2. 覆盖默认禁用样式，清除透明度并优化可读性

DevExtreme禁用状态默认会加opacity: 0.6左右的透明度，强制覆盖这个属性，同时调整文字、背景和线条颜色增强清晰度：

/* 核心：去掉禁用状态的默认透明度 */
.dx-state-disabled.dx-datagrid {
  opacity: 1 !important;
  background-color: #f2f2f2;
}

/* 优化禁用状态下的数据行样式 */
.dx-state-disabled.dx-datagrid .dx-datagrid-content .dx-row {
  color: #000 !important;
  background-color: #fff !important;
}

/* 调整行分隔线颜色，增强区分度 */
.dx-state-disabled.dx-datagrid .dx-datagrid-content .dx-row.dx-row-lines {
  border-color: #ddd !important;
}

/* 聚焦行（若需保留）的样式优化 */
.dx-state-disabled.dx-datagrid .dx-datagrid-content .dx-row.dx-row-lines.dx-row-focused {
  border-color: #000 !important;
}

额外提示 #

• 尽量减少!important的使用，如果你的选择器优先级足够（比如基于组件嵌套层级写更精确的选择器），可以去掉，但禁用状态的默认样式优先级较高，暂时保留能确保生效。
• 使用组件自带的disabled属性时，DevExtreme会自动给Grid容器加上dx-state-disabled类，和上述CSS规则完全匹配。

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