如何修改Material UI中DataGrid组件的列显示选项样式？

要修改DataGrid列显示选项中的输入框边框和复选框颜色，你之前的代码问题在于CSS选择器层级错误——列显示面板（ColumnPanel）的DOM结构并非直接嵌套在.MuiDataGrid-paper下，需要调整选择器指向正确的容器。

正确实现代码 #

sx={{
  // 定位列显示面板容器
  '& .MuiDataGrid-columnPanel': {
    // 输入框默认边框颜色
    '& .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.secondary.dark,
    },
    // 输入框聚焦时的标签颜色
    '& .MuiInputLabel-root.Mui-focused': {
      color: theme.palette.secondary.dark,
    },
    // 输入框hover状态的边框颜色
    '& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.secondary.dark,
    },
    // 复选框选中状态颜色
    '& .MuiCheckbox-root.Mui-checked': {
      color: theme.palette.secondary.dark,
    },
    // 复选框hover状态颜色
    '& .MuiCheckbox-root:hover': {
      color: theme.palette.secondary.dark,
    }
  }
}}

关键说明 #

• 列显示面板的根容器类名是.MuiDataGrid-columnPanel，所有内部组件样式需要嵌套在此选择器下才能生效
• 补充了输入框hover状态的边框样式，确保交互体验一致
• 覆盖了复选框的选中和hover状态颜色，满足样式需求

目标修改区域 #

内容的提问来源于stack exchange，提问作者mohamed nageh