如何移除Material-UI中Data Grid组件的单元格点击边框

点击单元格出现的边框是DataGrid单元格默认的聚焦outline样式，可通过以下两种方案移除：

方案1：覆盖全局CSS样式 #

直接添加如下CSS规则即可生效：

/* 移除DataGrid单元格聚焦边框 */
.MuiDataGrid-cell:focus,
.MuiDataGrid-cell:focus-within {
  outline: none !important;
}

方案2：通过Material-UI的classes属性局部配置（更推荐，不会污染全局样式） #

1. 先在你的样式定义中新增单元格样式规则：

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

const useStyles = makeStyles({
  main: {
    // 保留你原有的main样式配置
  },
  noOutlineCell: {
    '&:focus, &:focus-within': {
      outline: 'none',
    },
  },
});

2. 修正你现有组件中的classes属性配置（你当前的classes属性传值格式错误，需要传入对应组件插槽的样式映射对象），修改后的组件代码如下：

<DataGrid
  disableSelectionOnClick={true}
  className={classes.main}
  classes={{
    cell: classes.noOutlineCell
  }}
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5,10,15]}
  checkboxSelection={true}
  disableColumnSelector
  disableDensitySelector
  onCellClick={click}
  disableColumnFilter
  disableColumnMenu
/>

两种方案任选其一即可，仅移除点击时的聚焦边框，不会影响单元格本身的功能和其他样式。

内容的提问来源于stack exchange，提问作者rick