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

您可以为图标大小声明另一个状态并在内部更改它onStateChange。

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

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