首页 > 解决方案 > React Ag Grid 与材质主题类

问题描述

有什么方法可以将基于材质主题的类实现到 Ag Grid 行。下面是我的场景。提前致谢

材质样式

const styles = makeStyles((theme) => ({
    actionIcon: {
        '& svg': {
            fontSize: theme.palette.currentTheme.gridIconSize,
            color: theme.palette.currentTheme.gridIconColor,
            opacity: 0.6,
        }
      },
      rowNormal: {
        backgroundColor: theme.palette.currentTheme.gridValueBackgroundColor,
        color: theme.palette.currentTheme.gridValueFontColor,
      },
      rowHeader: {
        backgroundColor: theme.palette.currentTheme.gridHeaderBackgroundColor,
        color: theme.palette.currentTheme.gridHeaderFontColor,
      }

}));

行样式函数

this.state = { 
    getRowStyle: (params) => {
        const {classes}= this.props;
        if (params.node.group) {
            return (classes.rowNormal)
        } else {
            return (classes.rowHeader)
        }
    },
};

AG网格

<AgGridReact
  modules={this.state.modules}
  columnDefs={this.state.columnDefs}
  defaultColDef={this.state.defaultColDef}
  debug={true}
  rowData={this.state.rowData}
  onGridReady={this.onGridReady}
  frameworkComponents={this.state.frameworkComponents}
  getRowStyle={this.state.getRowStyle}
/>

标签: reactjsmaterial-uiag-grid

解决方案


推荐阅读