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”属性来更改。< /p>

Answer 2

就是这样。

createMuiTheme({
    palette: {
        ...,
        text: {
          primarey: 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 个答案: