如何删除 DataGrid 中焦点上的轮廓

我试图删除当您关注 Material UI 的 DataGrid 组件中的单元格时出现的轮廓。

这些方法都不起作用：

const useStyles = makeStyles((theme) => ({

// Method 1:
  '@global': {
    '.MuiDataGrid-cell:focus': {
      outline: 0,
    },
  },

// Method 2:
  cell: {
    '& .MuiDataGrid-cell:focus': {
      outline: 0,
    },
  },

// Method 3:
  cell: {
    ':focus': { outline: 0 },
  },

const classes = useStyles()

const dataGridColumns: GridColumns = [
    {
      ...other,
      cellClassName: classes.cell,
    }]

Edit:

'@global': {
        '.MuiDataGrid-root .MuiDataGrid-cell:focus': {
          outline: 0,
        },
      },

为我工作，但我不想使用全局 CSS 调整。

如果您使用的 MUI >= 5，您只需执行以下操作：

<DataGrid
   sx={{
      "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
         outline: "none !important",
      },
   }}
   ...
/>