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

Question

我试图删除当您关注 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,
    }]

编辑：

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

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

Answer 1

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

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

Answer 2

您可以使用 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;

资源：

• 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

编辑：更新为 4.0.0-alpha.29

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

Answer 3

为了完整起见，这就是我使用样式化组件设置 DataGrid 样式的方式，并且它起作用了。

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

Answer 4

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

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