MUI DataGrid 文本无法换行
当DataGrid 设置了固定行高之后,表格中的文本信息只能显示一行,且无法换行。
此时需要重写DataGrid的样式,需要用到Styled 样式库 具体代码如下:
const CustomDataGrid = styled(DataGrid)`
.MuiDataGrid-viewport,
.MuiDataGrid-row,
.MuiDataGrid-renderingZone {
max-height: none !important;
}
.MuiDataGrid-cell {
max-height: none !important;
overflow: auto;
white-space: initial !important;
line-height: 16px !important;
display: flex !important;
align-items: center;
padding-top: 10px !important;
padding-bottom: 10px !important;
}
`
如果使用Typescript ,styled 会导致类型报错。请在行 最后添加 as typeof DataGrid
; 进行强制类型转换。