Remove Bottom Borders from MUI X Data Grid

Question

I'm trying to override the default bottom border between each row in a MUI X Data Grid Component, but have had no luck. So far, I've tried using a theme override, adding a className with border proeprty set to none, tried using the sx feature, and a custom index.css stylesheet. Any help would be greatly appreciated.

Here's my component: 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>

Here are the unsuccessful styling attempts I've had so far:

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,
   }

Any help is greatly appreciated - thank you in advance.

Answer 1

I recently found a slightly shorter way to remove all borders from a MUI's datagrid table, without removing the border of other components.

<DataGrid
  columns={columns}
  rows={rows}
  sx={{ '&, [class^=MuiDataGrid]': { border: 'none' } }}
  />

• & will target the DataGrid itself, removing the outer border of the table,
• [class^=MuiDataGrid]' uses an attribute selector to target every grid's child element with a class attribute that starts with MuiDataGrid

Answer 2

I was also struggling with this. This is the solution I came up with. Its a little messy but it works. You can add this to your styles.tsx.

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

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