如何使 React-Material UI 数据网格使用交替阴影呈现行？答案

【问题标题】：How to make React-Material UI data grid to render rows using alternate shades?如何使 React-Material UI 数据网格使用交替阴影呈现行？
【发布时间】：2021-02-17 06:25:03
【问题描述】：

我正在为我的客户评估 React-Material 网格。关键反馈之一是没有交替的行阴影，这会影响用户体验。

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

这可能吗？

实际

希望

谢谢，

修

【问题讨论】：

标签： reactjs react-material

【解决方案1】：

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

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

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

这是working codesandbox

如果您想使用:nth-child，那么您需要:nth-child(even) 用于与.Mui-odd 相同的行集，尽管.Mui-odd 保持它在页面之间的排序，而伪选择器没有t.

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

【讨论】：

你知道为什么Material UI数据网格页面的官方文档页面缺少这个CSS类吗？ material-ui.com/api/data-grid/#css谢谢
我不知道为什么他们在文档中没有那个类。如果 css 类未记录，也许最好使用 nth-child 选择器。您还可以向 github 存储库提交问题或 PR 以将其记录在案。

【解决方案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)',
      },
    },
  }),
);

【讨论】：

嘿 Paito，您的示例似乎不起作用，但 css 可以。
你用<div className={classes.root}>之类的东西包裹你的DataGrid吗？
不，我没有。谢谢。
使用theme.palette.secondary[300] 的颜色来坚持主题可能会更好。

【解决方案3】：

这在 MUI v5 - TypeScript 中对我有用。

const useStyles = makeStyles((theme: Theme) =>
  ({
    root: {
      '& .MuiDataGrid-row:nth-child(odd)': {
        backgroundColor: theme.palette.mode === 'light' ? theme.palette.secondary[300] : theme.palette.secondary[900]
      },
    },
  }),
);

【讨论】：