Javascript 获取错误TypeError:color.charAt不是C:/…/node_modules/@material ui/core/styles/colorManipulator.js:148中的函数

Javascript 获取错误TypeError:color.charAt不是C:/…/node_modules/@material ui/core/styles/colorManipulator.js:148中的函数,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,以下是指向错误屏幕截图的链接: 这是使用颜色的代码部分 const theme = createMuiTheme({ palette: { primary: { light: '#33c9dc', main: '#00bcd4', dark: '#008394', contrastText: '#fff' }, secondary: { light: '#ff6333', main: '#ff3d

以下是指向错误屏幕截图的链接:

这是使用颜色的代码部分

const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#33c9dc',
      main: '#00bcd4',
      dark: '#008394',
      contrastText: '#fff'
    },
    secondary: {
      light: '#ff6333',
      main: '#ff3d00',
      dark: '#b22a00',
      contrastText: '#fff'
    }
  },
  typography: {
    useNextVariants: true
  },
  form: {
    textAlign: "center"
  },
  image: {
    margin: "10px auto 10px auto"
  },
  pageTitle: {
    margin: "10px auto 10px auto"
  },
  textField: {
    margin: "10px auto 10px auto"
  },
  button: {
    marginTop: 20,
    position: "relative"
  },
  customError: {
    color: "red",
    fontSize: "0.8rem",
    marginTop: 5
  },
  progress: {
    position: "absolute"
  }
});

我已经尝试将颜色从十六进制更改为rgb值,但没有成功。

我解决此问题的方法是将所有样式对象放在另一个对象中,而不包含(调色板)对象,并仅将不包含(调色板)对象的对象展开

现在可以在styles对象中执行此操作

const style = theme => ({
  ...theme.spreadThis
});    
希望这对你也有用!
祝你好运

我的调色板中有一个空对象:

export default {
  breakpoints: {...},
  text: {
    primary: "rgba(0, 0, 0, 0.87)",
    secondary: "rgba(0, 0, 0, 0.54)",
    disabled: "rgba(0, 0, 0, 0.38)",
    hint: "rgba(0, 0, 0, 0.38)"},
  divider: {}, // This was the issue, Either remove or put values in
  background: {
    paper: "#fff",
    default: "#fafafa",
    test: "#616161"
  },
};

它没有以任何方式影响任何核心库、样式库或图标库,但我多年来一直遇到与您相同的错误!删除此选项为我解决了问题。

是的,这对我来说很有效,但我不明白它是如何工作的。我也在我的代码中尝试它,我需要在哪里使用样式对象?与您完全相同,您是否也遵循了此很棒的教程?完全相同的代码;)
export default {
  breakpoints: {...},
  text: {
    primary: "rgba(0, 0, 0, 0.87)",
    secondary: "rgba(0, 0, 0, 0.54)",
    disabled: "rgba(0, 0, 0, 0.38)",
    hint: "rgba(0, 0, 0, 0.38)"},
  divider: {}, // This was the issue, Either remove or put values in
  background: {
    paper: "#fff",
    default: "#fafafa",
    test: "#616161"
  },
};