从材质 UI 中的数据网格中删除下边框 (mui)

Question

我正在尝试覆盖 MUI 数据网格组件中每行之间的默认底部边框，但没有运气。到目前为止，我已经尝试使用主题覆盖，添加一个borderproeprty 设置为none的className，尝试使用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',
},
}}

Answer 2

在 MUI v5 项目中，我使用了这个，它已经起作用了。删除了主要边框。

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

Answer 3

在 MUI v5 中，可以通过自定义数据网格来完成

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

Answer 4

我最近发现了一种稍微短一点的方法来删除 MUI 的数据网格表中的所有边框，而无需删除其他组件的边框。

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

• &将面向数据网格本身，删除表的外部边框，
• [class^=MuiDataGrid]'使用属性选择器来定位每个网格的子元素，该子元素具有以MuiDataGrid开头的class属性

Answer 5

对于那些仍然面临这个问题的人，这里有一个简单的工作解决方案，使用MUI v5和v6：

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

Answer 6

我只是尝试在我的项目中放置一个静态 css 文件，并在周围的<div>上放置一个class="peaches"，这样我就可以保持我的样式合乎逻辑而不会!importants。

这有效 - 它确实删除了我要删除的所有边框(每行之间以及页眉、页脚和表格本身周围)：

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

如果您将 CSS 选择器特异性用于其预期目的，则不需要!important。Chrome DevTools 样式检查器会显示边框的来源，您可以查看 MUI 使用的选择器计数，并确保在 CSS 中通过数字击败它们。