如何通过主题统一设置Material UI GridActionsCellItem图标按钮颜色？

有两种靠谱的方式可以通过MUI主题统一配置所有GridActionsCellItem里的图标颜色：

方法一：精准定制GridActionsCellItem的图标样式 #

直接针对Data Grid的操作单元格项组件做样式覆盖，这样只会影响Data Grid里的操作图标，不会干扰其他组件：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiGridActionsCellItem: {
      styleOverrides: {
        // 直接控制图标元素的颜色
        icon: {
          color: '#123', // 换成你要的颜色，或者写 'inherit' 继承父元素颜色
        }
      }
    }
  }
});

// 把你的整个应用（或包含Data Grid的组件）用ThemeProvider包裹
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 这里放你的Data Grid Pro组件 */}
    </ThemeProvider>
  );
}

方法二：全局覆盖IconButton样式（按需选择） #

如果希望所有MUI IconButton都用这个颜色（包括Data Grid里的操作按钮），可以直接全局覆盖IconButton的默认样式：

const theme = createTheme({
  components: {
    MuiIconButton: {
      styleOverrides: {
        root: {
          color: '#123', // 或 'inherit'
          // 要是只想让Data Grid里的IconButton生效，加个类选择器限定范围
          '&.MuiDataGrid-cell .MuiIconButton-root': {
            color: '#123',
          }
        }
      }
    }
  }
});

两种方法里，推荐第一种，因为它只作用于Data Grid的操作按钮，不会意外修改其他地方的图标颜色。如果用color="inherit"，图标会自动继承所在单元格的文字颜色，和表格整体风格更统一。

内容的提问来源于stack exchange，提问作者THX-1138