MUI DataGrid - 设置导出的 Excel 文件样式 + 制作分层下拉菜单

Question

我有两个问题需要解决。

1. 首先，我想使用以下参数设置导出的 Excel 文件的样式：

• 我想将长文本包装在一个单元格中并禁用溢出包装格式。
• 我想更改表格的背景颜色。
• 我想让列标题比表值更粗。

我正在使用 MUI GridToolbarExport 组件。这是数据网格工具栏组件的代码。

const TreatmentsToolbarForEvent = ({event, usersFromOpen, setUsersFromOpen}: IProps) =>(
        <GridToolbarContainer>
            {/* @ts-ignore */}
            <GridToolbarColumnsButton sx={{"& .MuiButton-startIcon": {marginLeft: "5px"}}}/>
            {/* @ts-ignore */}
            <GridToolbarFilterButton sx={{"& .MuiButton-startIcon": {marginLeft: "5px"}}}/>
            <GridToolbarExport sx={{"& .MuiButton-startIcon": {marginLeft: "5px"}}}/>
            <AddFormDialog entity={"treatments"} eventId={event.id}/>
            <FormDialogUsers event={event} open={usersFromOpen} setOpen={setUsersFromOpen}/>
        </GridToolbarContainer>
    );

2. 其次，我想在数据网格选择和可编辑列中进行分层选择。 。还有。 这是 dataGrid 列的代码：

const departmentSelectDropDown = () => window.config.frontend.departmentOptions;

const columns: GridColDef[] = [
        { field: 'department', headerName: strings().department, flex: 1, editable:isInSpecificEvent, type: "singleSelect", valueOptions: departmentSelectDropDown, renderCell: (params) => params.row.department},
        { field: 'system_id', headerName: strings().system_name, flex: 1, editable:isInSpecificEvent, type: "singleSelect", valueOptions: systemsForSelectDropdown, renderCell: (params) => params.row.system_name},
....

希望我们一起找到答案。我将继续寻找解决方案，如果我能找到解决方案，我将在这里发布。

先谢谢了！！ （：

对于样式，我尝试在 MUI 文档中搜索，但没有找到对 excel 文件进行样式设置的内容。 对于下拉菜单，我尝试检查 MUI DataGrid columns API 是否可以制作分层下拉菜单，但没有找到解决方案。我刚刚发现分组下拉菜单，这不是我想要的。

Answer 1

用于在特定列中换行文本：

MUI码头有

columnStyles第二个房产

然后你可以像这样设置你的列：

columnsStyles: {
            <columnNameThatYouWantTextToBeWrapped>: {  <- Here you need to write your column name, or column.field property
                alignment: {
                    wrapText: true
                }
            }
        }