Change default Text Color Material UI

user_3935035 0
Viewed 9935

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,
        },
    ...
    }
...
}
material-design material-ui reactjs javascript
2 Answers

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>
user_39350350

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.

user_108465400
Related