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

Question

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

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

这可能吗？

实际

需要

谢谢，

秀

Answer 1

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

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

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

这是一个working codesandbox

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

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

Answer 2

使用此解决方案，您可以在 light/dark 模式下使其动态化，并保留鼠标悬停效果。

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

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

Answer 4

查看官方 StripedDataGrid 组件 example。

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

How to make React-Material UI data grid to render rows using alternate shades?

reactjs

react-material

实际

需要