Getting a error TypeError: color.charAt is not a function in C:/...../node_modules/@material-ui/core/styles/colorManipulator.js:148

Question

Here is a link to the screenshot of the error : https://drive.google.com/open?id=1HL-Fy1M4tHp9qMUpt88PzOfI10AHHem- .

This is the code portion where colors are used.

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

I already tried changing the colors from hexadecimal to rgb values, it didn't work.

Answer 1

my solution to this problem is to put all styling objects inside another object leaving out the (palette) object, and spread out only that object that does not contain the (palette)

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

now you would do this in the styles object

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

hope this works out for you too! good luck

Answer 2

In my case I had an empty object in my palette:

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

It didn't effect any of the core, style or icon libraries in any way but I was hitting the same error as you for ages! Removing this sorted out the issue for me.