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组件中执行以下操作：

import { colorPalette } from 'colorPalette';

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

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

<Button color={'success'} />
<Button color={'pdfRed'} />

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

1 个答案: