更改默认文本颜色材质 UI

Question

在哪里可以更改材质 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的其他文本颜色？

模拟游戏为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"排版组件的默认颜色，可以使用这种代码。

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;

这会将排版组件的默认颜色更改为您想要的任何颜色(对于此示例，它将默认颜色设置为红色(，当然，它将通过在排版组件中使用"颜色"道具来更改。