更改默认文本颜色材质 UI答案

【问题标题】：Change default Text Color Material UI更改默认文本颜色材质 UI
【发布时间】：2020-02-05 15:49:35
【问题描述】：

在哪里可以更改 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,
        },
    ...
    }
...
}

【问题讨论】：

标签： javascript reactjs material-design material-ui

【解决方案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>

【讨论】：

【解决方案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”属性进行更改。

【讨论】：