如何使React-Material UI数据网格使用交替着色来渲染行？

Question

我正在为我的客户评估React-Material网格。其中一个关键反馈是缺少行的替代阴影，这会影响用户体验。

https://material-ui.com/components/data-grid/#mit-version

这个是可能的吗？

实际

​

​

所需

​

​

谢谢,

Sau

Answer 1

通过CSS选择器添加非常简单。

如果您为奇数行.Mui-odd添加了选择器，则可以设置背景的颜色并将其设置为条纹。对于另一半，您可以使用.Mui-even。

.MuiDataGrid-row.Mui-odd {
  background-color: aliceblue;
}

这是一个working codesandbox

如果您想使用:nth-child，那么对于与..Mui odd相同的行集，需要使用:nth-child(even)。.Mui odd保持页面之间的排序，而伪选择器则不需要。

.MuiDataGrid-row:nth-child(even){
  background-color: aliceblue;
}

Answer 2

使用此解决方案，您可以使其具有明/暗模式的动态效果，还可以保留鼠标悬停效果。

const useStyles = makeStyles((theme) =>
  ({
    root: {
      '& .MuiDataGrid-row.Mui-even:not(:hover)': {
        backgroundColor: theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.04)',
      },
    },
  }),
);