更改默认文本颜色材质 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

它是这样完成的。createMuiTheme({&nbsp; &nbsp; palette: {&nbsp; &nbsp; &nbsp; &nbsp; ...,&nbsp; &nbsp; &nbsp; &nbsp; text: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; primary: styles.t,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secondary: styles.tt,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled: styles.ttt,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hint: styles.tttt,&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ...&nbsp; &nbsp; }...}确保那primary是color code，而不是object。颜色可以这样使用<Typography&nbsp; &nbsp; color='textPrimary'> // or 'textSecondary', 'hint', 'disabled'&nbsp; &nbsp; Foo Bar</Typography>

Answer 2

如果要更改“material-ui”Typography 组件的默认颜色，可以使用这种代码。import { createMuiTheme, ThemeProvider, Typography } from '@material-ui/core';const MuiTheme = createMuiTheme({&nbsp; typography: {&nbsp; &nbsp; allVariants: {&nbsp; &nbsp; &nbsp; color: 'red'&nbsp; &nbsp; }&nbsp; }});const App = () => {&nbsp; return (&nbsp; &nbsp; <ThemeProvider theme={MuiTheme}>&nbsp; &nbsp; &nbsp; <Typography>Hi there</Typography>&nbsp; &nbsp; </ThemeProvider>&nbsp; );};export default App;这会将 Typography 组件的默认颜色更改为您想要的任何颜色（对于此示例，它使默认颜色为红色），当然它会通过在 Typography 组件中使用“color”属性来更改。