如何设置MUI X Data Grid拖拽行样式？解决ID垂直显示问题

定位目标元素 #

拖拽时显示的行预览元素，在你使用的MUI X Data Grid v5版本中，对应类名为MuiDataGrid-rowDragPreview，内部单元格内容容器的类名是MuiDataGrid-cellContent。你可以通过浏览器开发者工具（F12）选中拖拽状态下的预览行，确认这些类名是否匹配当前环境。

修复CSS样式 #

在全局样式文件或组件内的样式定义中添加以下规则，强制ID单行显示：

/* 强制拖拽预览行的单元格内容不换行 */
.MuiDataGrid-rowDragPreview .MuiDataGrid-cellContent {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选：超出容器宽度时显示省略号 */
}

/* 若上述规则不生效，可直接针对ID字段的单元格设置 */
.MuiDataGrid-rowDragPreview [data-field="id"] {
  white-space: nowrap;
}

额外排查点 #

• 如果你给ID列自定义了单元格渲染组件，检查组件内是否设置了white-space: pre、display: flex等会导致文字垂直排列的样式，如有则调整为不换行的配置。
• 若类名因版本细节存在差异，直接通过开发者工具提取当前预览元素的准确选择器替换即可。

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