CODEWITHSUNDEEP
cssreactjstypescriptmaterial-ui
AMP_035
AMP_035

Reputation: 237

Remove Bottom Borders from DataGrid in Material UI (mui)

I'm trying to override the default bottom border between each row in a MUI 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.

Upvotes: 8

Views: 19194

Answers (6)

cmolina
cmolina

Reputation: 1378

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

Upvotes: 10

Uldis Barbans
Uldis Barbans

Reputation: 59

I just tried plopping a static css file in my project and a class="peaches" on a surrounding <div> so I can keep my styles logical without !importants.

This worked - it did remove all the borders I wanted to remove (between each row and also around the headers, footers, and table itself):

.peaches .MuiDataGrid-root {
  border: 0;
}
.peaches .MuiDataGrid-cell {
  border: 0;
}
.peaches .MuiDataGrid-columnHeaders {
  border: 0;
}
.peaches .MuiDataGrid-footerContainer {
  border: 0;
}

You don't need !important if you use CSS selector specificity for its intended purpose. The Chrome DevTools Styles inspector shows where the borders come from, and you can eyeball the selector count that MUI uses, and just ensure you beat them by numbers in your CSS.

Upvotes: 0

MITech Software Solutions
MITech Software Solutions

Reputation: 1

For those who is still facing the issue, here is a simple working solution with MUI v5 & v6:

<DataGrid 
sx={{ 
'&>.MuiDataGrid-main': {
                            '&>.MuiDataGrid-columnHeaders': {
                                borderBottom: 'none'
                            },

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

</>

Upvotes: 0

Fathima Irfana
Fathima Irfana

Reputation: 99

In MUI v5 , can be done by customizing the datagrid

  const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
    border: 0,
    color: '#757575',
    fontFamily: 'Lato',
    WebkitFontSmoothing: 'auto',
    letterSpacing: 'normal',
  '& .MuiDataGrid-row': {
   width: '1191px',
   height: '34px',
  background: '#FFFFFF',
  borderRadius: '27px',

},
'& .MuiDataGrid-iconSeparator': {
  display: 'none',
},
'& .MuiDataGrid-columnHeaders': {

  width: '1191px',
  minHeight: '34px',
  background: '#D5DFED',
  borderRadius: '20px',

},
'& .MuiDataGrid-columnHeaderTitle': {
  fontWeight: 700,
  fontSize: '14px', minHeight: '34px',
},
'& .MuiDataGrid-row.Mui-selected': {
  background:' #FFFFFF',
  border: '1px solid #73A0FF',
  borderRadius:' 27px',
},
'& .MuiDataGrid-cell': {
  fontFamily:'Lato',
  fontWeight: 400,
  fontSize: '14px',
  lineHeight: '17px',
  color: '#757575',
  boxSizing: 'none',borderBottom: 'none',
},
'& .MuiPaginationItem-root': {
  borderRadius: 0,
}
}));

Upvotes: 1

Da Cookie Manster
Da Cookie Manster

Reputation: 111

In MUI v5 project I used this, and it's worked. Main borders are removed.

export const customTheme = createTheme({
    components: {
        MuiDataGrid: {
            styleOverrides: {
                root: {
                    border: 'none'
                }
            }
        }
    }
})

Upvotes: 4

Ahmad
Ahmad

Reputation: 83

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

Upvotes: 5

Related Questions