为反应材料表应用特定主题

Posted 2023-02-22

【中文标题】为反应材料表应用特定主题

【英文标题】：Applying specific theme for react material-table

【发布时间】：2019-08-31 20:44:06

【问题描述】：

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

对表格行进行条带化。 在上面的代码 sn-p 中，我使用了一个逻辑来设置条纹行。

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

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

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

【参考方案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/

【参考方案2】：

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

实现了条纹行

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