I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.

我正在尝试删除当您将焦点放在Material UI的DataGrid组件中的单元格上时出现的轮廓。

None of these methods work:

这些方法都不起作用：

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,
        },
      },

worked for me, but I would prefer not to use a global css adjustment.

对我来说很管用，但我不喜欢使用全局的CSS调整。

If you're using MUI >= 5, you can simply do the follow:

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

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

You can modify the MuiDataGrid-cell class by using Material UI's useStyles() function like the following (no need to declare globally):

您可以使用Material UI的useStyles()函数修改MuiDataGrid-cell类，如下所示(不需要全局声明)：

import { makeStyles } from '@material-ui/core/styles';
import { DataGrid } from '@material-ui/data-grid';

const useStyles = makeStyles({
    root: {
        '&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
            outline: 'none',
        },
    }
});

const MyComponent = () => {
    const classes = useStyles();

    return (
        <DataGrid
           className={classes.root}
           // ...other table setup props
        />   
    );
}

export default MyComponent;

Resources:

资源：

• https://material-ui.com/styles/advanced/#with-material-ui-core


• https://material-ui.com/api/data-grid/#css


• https://github.com/mui-org/material-ui-x/issues/420

Edit: Updated for 4.0.0-alpha.29

编辑：更新为4.0.0-Alpha.29

const useStyles = makeStyles({
    root: {
        '&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
            outline: 'none',
        },
    }
});

Just for completion sake this is how I styled the DataGrid with styled components and it worked.

只是为了完成起见，这是我如何设计的DataGrid与风格的组件，它的工作。

const StyledDataGrid = styled(DataGrid)`
  &.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
  &.MuiDataGrid-root .MuiDataGrid-cell:focus {
    outline: none;
  }
`;

const useStyles = makeStyles(
      () => createStyles({
        root: {
          '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
            outline: 'none',
          },

          '& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-cell:focus': {
            outline: 'none',
          },
        },
      }),
    );

I just needed to do this as well for a project I'm working on.

我只是需要这样做，以及为一个项目，我的工作。

You can override many of the classes used by the datagrid, but you'll need to make sure that the selector being used is more specific in order for it to take precedence.

您可以覆盖数据网格使用的许多类，但您需要确保所使用的选择器更具体，才能使其优先。

Many of their classes are documented here in the CSS section.

他们的许多类都在这里的css一节中进行了说明。

The below snippet worked for me.

下面的片断对我很有效。

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

The perfect way for me was add this code to your css file:

对我来说，最好的方法是将以下代码添加到您的css文件中：

.MuiDataGrid-root .MuiDataGrid-columnHeader,
.MuiDataGrid-root .MuiDataGrid-cell {
  outline: none !important;
}

I found that if we set it just for :focus, then if we click to a button of cell, outline still visible

我发现，如果我们只将其设置为：焦点，那么如果我们点击单元格的按钮，轮廓仍然可见

I use createTheme to manage it like so:

我使用createTheme这样管理它：

{ createTheme } from '@mui/material';
import type {} from '@mui/x-data-grid/themeAugmentation';

export const theme = createTheme({
  ...
   components: {
     MuiDataGrid: {
       styleOverrides: {
         root: {
          '& .MuiDataGrid-cell:focus': {
            outline: 'none'
          },
          '& .MuiDataGrid-cell:focus-within': {
            outline: 'none'
          }
        },
       }
     }
   }
  ...
})