reactjs - Material-UI DataGrid 基于文本内容的动态行高

Question

使用 DataGrid 时，我无法弄清楚如何使行高可变，以便行高动态基于单元格中文本内容的长度。

我在想我需要renderCell在具有较长文本的列上添加，并使用该<Typography>组件，但我不知道用什么参数来设置它的样式。

有很多关于如何处理截断、省略号等的文档，但我似乎无法弄清楚我需要根据内容申请可变行高的内容。

标签： reactjsmaterial-ui

Answer 1

const StyledDataGrid = withStyles({
    root: {
        '& .MuiDataGrid-renderingZone': {
            maxHeight: 'none !important',
        },
        '& .MuiDataGrid-cell': {
            lineHeight: 'unset !important',
            maxHeight: 'none !important',
            whiteSpace: 'normal',
        },
        '& .MuiDataGrid-row': {
            maxHeight: 'none !important',
        },
    },
})(DataGrid);

有关示例，请参阅此演示。