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

    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>

Answer 2

如果要更改“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”属性来更改。