how do i remove the outline on focus in DataGrid

Question

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

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.

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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.

The below snippet worked for me.

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