Question

我正在尝试将反应物料表（https://github.com/mbrn/material-table）与我的项目集成。

我要更新样式/主题。

我用过类似的东西。

<MaterialTable options={{
                        rowStyle: x => {
                            if ( x.id % 2 ) {
                            return { backgroundColor: "#f2f2f2" }
                            }
                        },
                        'headerStyle' : {
                            backgroundColor: 'red',
                            color: theme.palette.common.white
                        }
                        }}
    columns={columns}
    data={data}
    title="New Table"
/>

但是我想要一个通用的样式和主题，例如

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

基本上我想拥有类似CustomMaterialTable之类的东西，不过我的主题/风格没什么。

对表行进行条纹处理。在上面的代码片段中，我使用了一种逻辑来划分带区的行。

if ( x.id % 2 ) {
    return { backgroundColor: "#f2f2f2" }
}

由于我的表将进行排序，因此我希望它位于自动生成的行ID上，而不是x.id（其中x是我的数据）上。

我想根据语言选择（动态）使用rtl和多种语言的文本。

Answer 1

您可以覆盖组件。看例子：https://mbrn.github.io/material-table/#/docz-examples-10-example-component-overriding
请问您可以尝试用x.tableData.id代替x.id吗？
您应将Material-ui主题与方向（ltr或rtl）一起使用：https://material-ui.com/customization/themes/

Answer 2

您可以使用 material-UI makeStyles 来更改 material-table 主题。当我改变材料表的外观时的这个例子我使用

实现了条纹行

'&:nth-child(even)': {
      backgroundColor: '#FAF7FA',
 },

因为在使用 rowStyle 和更改表格排序后，剥离的行仍然附加到它们的主要字段。

以下是完整示例：

export const useClasses = makeStyles(({ palette }) => ({
  root: {
    borderTopRightRadius: '12px',
    borderTopLeftRadius: '12px',
    boxShadow: '0px 5px 40px rgb(0 0 0 / 10%)',
    fontFamily: 'Montserrat',
    overflow: 'hidden',
    '& .MuiPaper-root ': {
      boxShadow: 'none',
    },
    '& .MuiTable-root': {
      color: palette.text.textPrimary,
      '& .MuiTableHead-root': {
        '& .MuiTableRow-head': {
          '& .MuiTableCell-head': {
            background: 'rgba(90, 0, 90, 0.09)',
            color: palette.text.textPrimary,
          },
        },
      },
      '& .MuiTableRow-root': {
        '&:nth-child(even)': {
          backgroundColor: '#FAF7FA',
        },
      },
    },
  },
}));

将特定主题应用于反应物料表

2 个答案: