Change default Text Color Material UI

Question

Where can I change the default Text Color in the Material UI Theme?

Setting primary, secondary and error works

const styles = { a: 'red', b: 'green', ... };

createMuiTheme({
    palette: {
        primary: {
          light: styles.a,
          main: styles.b,
          dark: styles.c,
          contrastText: styles.d
        },
        secondary: {
          light: styles.aa,
          main: styles.bb,
          dark: styles.cc,
          contrastText: styles.dd
        },
        error: {
          light: styles.aaa,
          main: styles.bbb,
          dark: styles.ccc,
          contrastText: styles.ddd,
        },
    ...,
    }
...,
}

Now, when I use a <Typography /> component, I can do this

<Typography
  color='primary'
  variant='h6'>
  Foo
</Typography>

That gives it the color I defined in palette.primary.main.

However, when I leave the color prop empty

<Typography
  variant='h6'>
  Foo
</Typography>

I gives the a greyish color. Where is that color defined? Where can I define additional text colors despited primary, secondary and error?

Simplay adding another key to palette is not working...

createMuiTheme({
    palette: {
        ...,
        text1: {
          light: styles.t,
          main: styles.tt,
          dark: styles.ttt,
          contrastText: styles.tttt,
        },
    ...
    }
...
}

Answer 1

It is done like this.

createMuiTheme({
    palette: {
        ...,
        text: {
          primary: styles.t,
          secondary: styles.tt,
          disabled: styles.ttt,
          hint: styles.tttt,
        },
    ...
    }
...
}

Make sure that primary is a color code, not an object. The colors can be used like so

<Typography
    color='textPrimary'> // or 'textSecondary', 'hint', 'disabled'
    Foo Bar
</Typography>

Answer 2

If you want to change the default color of the "material-ui" Typography components, you can use this kind of code.

import { createMuiTheme, ThemeProvider, Typography } from '@material-ui/core';

const MuiTheme = createMuiTheme({
  typography: {
    allVariants: {
      color: 'red'
    }
  }
});

const App = () => {
  return (
    <ThemeProvider theme={MuiTheme}>
      <Typography>Hi there</Typography>
    </ThemeProvider>
  );
};

export default App;

This will change the Typography components' default color to whatever you would like to be (for this example, it makes the default color red), of course it will be changed by using "color" prop in the Typography component.