reactjs - 为 react Material 表应用特定主题

Question

我正在尝试将 react Material 表( 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 这样的东西，它只是我的主题/风格。

strip 化表格行。
在上面的代码片段中，我使用了一个逻辑来分割行。

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 ， 请？

您应该使用带有方向(ltr 或 rtl)的 material-ui 主题:https://material-ui.com/customization/themes/