更改默认文本颜色材质 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道具留空时

<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

如果你想改变“material-ui”Typography组件的默认颜色，你可以使用这种代码。

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;

这会将 Typography 组件的默认颜色更改为您想要的任何颜色（在本例中，它将默认颜色设置为红色），当然可以通过在 Typography 组件中使用“color”属性来更改它。

Answer 2

它是这样完成的。

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

确保那primary是color code，而不是object。颜色可以这样使用

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