Question

以下是错误屏幕截图的链接：https://drive.google.com/open?id=1HL-Fy1M4tHp9qMUpt88PzOfI10AHHem-。

这是使用颜色的代码部分。

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值，但这没有用。

Answer 1

在我的情况下，我的调色板中有一个空对象：

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"
  },
};

它并没有以任何方式影响任何核心，样式或图标库，但多年来我一直遇到与您相同的错误！删除该错误对我来说是个问题。

Answer 2

我对这个问题的解决方案是将所有样式对象放到另一个对象中，而忽略（调色板）对象，并仅散布不包含（调色板）的对象。

const theme = createMuiTheme({
  palette: {
      primary: {
        light: '#33c9dc',
        main: '#00bcd4',
        dark: '#008394',
        contrastText: '#fff'
      },
      secondary: {
        light: '#ff6333',
        main: '#ff3d00',
        dark: '#b22a00',
        contrastText: '#fff'
      }
    },

    // the object to be spread
    spreadThis: {
       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"
      }
    }
});

现在您将在样式对象中完成

const style = theme => ({
  ...theme.spreadThis
});

希望这对您也有用！祝你好运

收到错误TypeError：color.charAt不是C：/...../ node_modules/@material-ui/core/styles/colorManipulator.js：148

2 个答案: