如何将MUI DataGridPremium的展开/折叠图标对齐到右侧？

你现在把GRID_DETAIL_PANEL_TOGGLE_COL_DEF合并到每一列的做法不对——这个配置是用来单独创建详情面板切换列的，不是给每个列叠加的。这种错误会导致样式冲突，也是你用sx设置对齐没生效的核心原因。

1. 修正列定义逻辑 #

把详情面板切换列单独加到columns数组里，不要混入普通列的配置：

if (users.length > 0) {
    // 生成普通数据列
    const keys = Object.keys(users[0]);
    const regularColumns = keys.map((key) => ({
        field: key,
        headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' '),
        width: 180,
    }));
    // 单独添加详情面板切换列
    columns = [
        ...regularColumns,
        {
            ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF,
            width: 60, // 自定义列宽，方便图标摆放
            align: 'right', // 直接设置列内容右对齐
            headerAlign: 'right', // 表头同步对齐（可选）
        }
    ];
    // 生成行数据
    rows = users.map((user, index) => ({
        id: index + 1,
        ...user
    }));
}

2. 用sx增强对齐效果（可选） #

如果上面的align: 'right'还达不到预期，可以通过组件的sx属性进一步控制切换图标的容器样式：

<DataGridPremium
    getDetailPanelContent={({row}) => <div>Row ID: {row.id}</div>}
    slots={{
        detailPanelExpandIcon: ExpandMoreIcon,
        detailPanelCollapseIcon: ExpandLessIcon,
    }}
    rows={filteredRows}
    columns={selectedColumns}
    getRowId={(row) => row.id}
    pageSizeOptions={[5, 10, 15, 100]}
    checkboxSelection
    sx={{
        '& .MuiDataGrid-detailPanelToggleCell': {
            justifyContent: 'flex-end',
            paddingRight: 1, // 给图标加右侧内边距，避免贴边
        }
    }}
/>

关于slotProps的用法 #

slotProps是用来给你自定义的slot组件传递属性的，比如你用了detailPanelExpandIcon这个slot，就可以通过slotProps直接给ExpandMoreIcon传参数：

<DataGridPremium
    slots={{
        detailPanelExpandIcon: ExpandMoreIcon,
    }}
    slotProps={{
        detailPanelExpandIcon: {
            fontSize: 'large', // 设置图标大小
            sx: { color: '#1976d2' } // 自定义图标颜色
        }
    }}
/>

这种方式不用写全局样式，直接精准控制插槽组件的属性。

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