how do i remove the outline on focus in DataGrid

user_15385393 0
Viewed 7332

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

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.

material-ui
5 Answers

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:

Edit: Updated for 4.0.0-alpha.29

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

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;
  }
`;
user_149123770 
const useStyles = makeStyles(
      () => createStyles({
        root: {
          '& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
            outline: 'none',
          },

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

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"
      },
    },
  },
}));
user_12265460

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

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