如何移除点击Material UI DataTable单元格时出现的轮廓线？

解决方案 #

你看到的点击单元格后出现的轮廓是组件默认的聚焦态outline样式，并非border控制，所以你查找border相关的样式规则无法匹配到对应类。

方法1：全局样式覆盖 #

直接在全局CSS文件中添加如下规则即可全局生效：

/* 适配MUI X DataGrid 组件 */
.MuiDataGrid-cell:focus,
.MuiDataGrid-cell:focus-visible {
  outline: none !important;
}

/* 如果你用的是MUI基础Table组件，用下面的规则 */
.MuiTableCell-root:focus,
.MuiTableCell-root:focus-visible {
  outline: none !important;
}

方法2：组件内局部配置 #

如果不想影响其他页面的同类型组件，可以直接在当前用到的DataGrid上通过sx属性配置：

<DataGrid
  sx={{
    '& .MuiDataGrid-cell:focus, & .MuiDataGrid-cell:focus-visible': {
      outline: 'none'
    }
  }}
  // 保留你原本的其他组件配置项
/>

注意事项 #

默认的聚焦轮廓是为了适配键盘导航的无障碍访问需求设计的，如果你的项目需要支持无障碍访问，建议在移除默认轮廓后，自定义更适配项目风格的聚焦态标识（比如浅灰色描边、背景色微调等），避免键盘操作的用户无法定位当前选中的单元格位置。

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