title: how do i remove the outline on focus in DataGrid
body: <p>I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.</p>
  <p><img src="https://i.stack.imgur.com/wUD8q.png" alt="I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component." /></p>
  <p>None of these methods work:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
  
  // Method 1:
    '@global': {
      '.MuiDataGrid-cell:focus': {
        outline: 0,
      },
    },
  
  // Method 2:
    cell: {
      '&amp; .MuiDataGrid-cell:focus': {
        outline: 0,
      },
    },
  
  // Method 3:
    cell: {
      ':focus': { outline: 0 },
    },
  
  const classes = useStyles()
  
  const dataGridColumns: GridColumns = [
      {
        ...other,
        cellClassName: classes.cell,
      }]
  </code></pre>
  <p>Edit:</p>
  <pre><code>'@global': {
          '.MuiDataGrid-root .MuiDataGrid-cell:focus': {
            outline: 0,
          },
        },
  </code></pre>
  <p>worked for me, but I would prefer not to use a global css adjustment.</p>