在 Material UI (mui) 中删除 DataGrid 的底部边框

Question

我试图覆盖 MUI 数据网格组件中每行之间的默认底部边框，但没有成功。到目前为止，我已经尝试使用主题覆盖、添加className属性border设置为none、尝试使用该sx功能和自定义index.css样式表。任何帮助将不胜感激。

这是我的组件： component.tsx

   <div className = {classes.ListTable}>
       <DataGrid
           sx={{
               border: 0, // also tried setting to none 
               borderRadius: 2,
               p: 2,
               minWidth: 300,
           }}
           rows={rows}
           columns={columns}
           pageSize={5}
           rowsPerPageOptions={[5]}
           checkboxSelection
           disableSelectionOnClick
           classes={{ root: classes.MuiTableCell}}
       />
    </div>

以下是我迄今为止不成功的造型尝试：

theme.tsx

const theme = createTheme({
  ...
   overrides: {
       DataGrid: {
           root:{
               border: 'none',
           }
       }
   }
});

index.css

.MuiPaper-root-MuiDrawer-paper, 
.MuiDataGrid-footerContainer, 
.MuiDataGrid-root, 
.MuiDataGrid-row, 
.MuiDataGrid-column, 
.MuiDataGrid {
    border: 0 !important;
}

styles.tsx

  ListTable: {
      borderBottom: "none",
      border: 0,
  },
   MuiTableCell: {
      borderBottom: "none",
      outline: 0,
      borderColor: "10px solid red",
      color: theme.palette.text.primary,
   }

非常感谢任何帮助 - 提前谢谢您。

Answer 1

我也为此苦苦挣扎。这是我想出的解决方案。它有点乱，但它有效。您可以将其添加到您的styles.tsx.

grid: {
'&>.MuiDataGrid-main': {
  '&>.MuiDataGrid-columnHeaders': {
    borderBottom: 'none',
  },

  '& div div div div >.MuiDataGrid-cell': {
    borderBottom: 'none',
  },
}}