使用材料主题类反应 Ag Grid

时间:2021-06-20 16:25:23

标签: reactjs material-ui 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}
/>

0 个答案:

没有答案