Material-UI : DataGrid/XGrid 如何检测密度变化？

Question

我想在用户更改密度表时更改操作图标大小： 当行较小时，右侧的笔图标应该改变大小，如下所示：

目前我使用 onStageChange 来捕获表上的所有更改并在组件上设置状态变量

           ...
           const [density, setDensity] = useState<GridDensity>();
           ...
           const actionEdit: GridColDef = {
            field: '',
            type: 'action',
            align: 'right',
            disableColumnMenu: true,
            disableClickEventBubbling: true,
            resizable: false,
            flex: 1,
            headerClassName: 'edit-theme-header',
            cellClassName: 'edit-theme-cell',
            renderCell: () => <EditAction size={density} onClick={() => alert('click')} />
          };
           ... 
           <XGrid
                .....
                onStateChange={(v) => setDensity(v.state.density.value)}
            />

它有效，但所有状态更改（不仅仅是密度）都会调用 onStateChange 。 有更好的办法吗？ :)

Answer 1

我的解决方案基于@mdmundo 答案。

...
const [density, setDensity] = useState<GridDensity>('compact');
...
<XGrid
    ...
    className={density === 'compact' ? 'compact' : ''}
    onStateChange={v => density !== v.state.density.value && setDensity(v.state.density.value)}
/>

一点风格：

.MuiXGrid-root.compact {
   /* some style */
}

Answer 2

您可以声明图标大小的另一种状态并在内部更改它

onStateChange

。

onStateChange={(v) => {
  setDensity(v.state.density.value);
  // HERE SET ICON SIZE STATE
}

然后，使用该状态值作为图标大小属性。

Answer 3

这是使用

@mui/x-data-grid version 7.3.2

实现此操作的一种方法：

import React, { useState } from 'react';

export const ExampleGrid = () => {
    
    const [density, setDensity] = useState('standard');
    
    return (
        <DataGrid
            {/* ...other props omitted */}
            density={density}
            onDensityChange={(newDensityString) => setDensity(newDensityString)}
        />
    )
}