Material ui 如何删除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,
    }]

编辑：

---

为我工作，但我不希望使用全局css调整。

您可以使用Material UI的useStyles（）函数修改MuidatGrid单元格类，如下所示（无需全局声明）：

从'@materialui/core/styles'导入{makeStyles}；
从'@material ui/data grid'导入{DataGrid}；
const useStyles=makeStyles({
根目录：{
“&.MuiDataGrid root.MuiDataGrid单元格：焦点”：{
大纲：“无”，
},
}
});
常量MyComponent=（）=>{
const classes=useStyles（）；
返回(
);
}
导出默认MyComponent；

资源：

编辑：更新为4.0.0-alpha.29

const useStyles=makeStyles({
根目录：{
“&.MuiDataGrid root.MuiDataGrid列标题：焦点，&.MuiDataGrid root.MuiDataGrid单元格：焦点”：{
大纲：“无”，
},
}
});

对于我正在进行的项目，我也需要这样做

您可以覆盖datagrid使用的许多类，但是您需要确保所使用的选择器更具体，以使其优先

他们的许多类都记录在CSS部分中

下面的片段对我很有用

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiDataGrid-root": {
      "& .MuiDataGrid-colCell:focus": {
        outline: "none"
      },
    },
  },
}));

---

这对我不起作用。我添加了有关设置的更多详细信息，以提供更多的清晰度。如果这不适用于您，您能否在问题中提供有关DataGrid组件设置的更多详细信息？

const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiDataGrid-root": {
      "& .MuiDataGrid-colCell:focus": {
        outline: "none"
      },
    },
  },
}));