javascript - 更改默认文本颜色 Material UI

Question

在哪里可以更改 Material UI 主题中的默认文本颜色？

设置primary , secondary和error作品

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,
        },
    ...,
    }
...,
}

现在，当我使用<Typography />时组件，我可以做到这一点

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

这给了它我在 palette.primary.main 中定义的颜色.

但是，当我离开color时 Prop 为空

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

我给了灰色。该颜色在哪里定义？尽管 primary 我可以在哪里定义其他文本颜色, secondary和error ？

Simplay 添加另一个键到 palette不工作...

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

Answer 1

就这样完成了。

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

确保primary是颜色代码，而不是对象。 颜色可以像这样使用

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