AgGrid的cellRendererFramework无法访问Material UI的主题

Question

我有一个AgGrid，通过使用cellRendererFramework我可以在列中渲染自己的按钮，一切正常，我可以渲染我的材质UI按钮，而不会出现任何问题，直到我在主题中创建了更多颜色为止像这样的调色板：

const theme = createMuiTheme({
  palette: {
    text: {
      primary: "rgba(0, 0, 0, 1)",
      secondary: "rgba(0, 0, 0, 1)",
    },
    primary: {
      main: '#064d80',
      contrastText: 'white',
    },
    // secondary: {
    //   main: '#f44336',
    // },
    secondary: {
      main: '#1b5e20',
      contrastText: 'white',
    },
    success: {
      main: '#28a745',
      contrastText: 'white',
      dark: 'rgb(97, 0, 0)'
    },
    pdfRed: {
      main: '#880000',
      contrastText: 'white',
      dark: 'rgb(97, 0, 0)'
    },
    lightGreen: {
      main: 'rgb(92, 184, 92)',
      contrastText: 'white',
      dark: 'rgb(45, 92, 46)',
    },
  },
});

function App() {

  return (
    <ThemeProvider theme={theme}>
      <div className="App">

        <Cockpit />
      </div>
    </ThemeProvider>
  );
}

export default App;

然后我写了一个使用调色板的按钮类：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import MaterialUIButton from "@material-ui/core/Button";

const Button = withStyles(theme => {
    console.log('theme', theme)
    return {
        root: props =>
            (props.variant === "contained" && props.color !== 'primary' && props.color !== 'secondary')
                ? {
                    color: theme.palette[props.color].contrastText,
                    backgroundColor: theme.palette[props.color].main,
                    "&:hover": {
                        backgroundColor: theme.palette[props.color].dark,
                        // Reset on touch devices, it doesn't add specificity
                        "@media (hover: none)": {
                            backgroundColor: theme.palette[props.color].main
                        }
                    }
                }
                : {}
    }
}
)(MaterialUIButton);

const muiButton = (props) => {
    return (
        <Button {...props}>
            {props.children}
        </Button>
    )
}

export default muiButton;  

[这在程序中的其他任何地方都有效，但是当我使用cellRendererFramework内的按钮时，我得到一个错误，即我正在访问的颜色是undefined，执行console.log(theme)后，我注意到在cellRendererFramework内theme.palette，没有我在app.js中为程序提供的新颜色，这是什么问题，作为解决方法，您有何建议？谢谢。

Answer 1

我找到了解决此问题的方法，我将在这里分享。我不依赖withStyle theme，而是导入包含所有颜色的调色板，然后在Button组件内执行以下操作：

contrastText = colorPalette[color].contrastText
main = colorPalette[color].main
dark = colorPalette[color].dark  

意思是我在调色板内寻找颜色，这意味着可以一直找到它。用法也很简单，我做这样的事情：