I've been trying to customize the spacing between rows in a MUI Data Grid Component by overriding the default bottom border, but haven't had much success. I've experimented with different approaches such as using a theme override, adding a className with the border property set to none, utilizing the sx feature, and even creating a custom index.css stylesheet. Any assistance on this matter would be highly appreciated.
Below is 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 methods I have attempted so far without success:
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,
}
If you have any suggestions or solutions, please feel free to share - your help will be greatly appreciated. Thank you in advance.