如何更改Material-UI AppBar背景色？

编程问答 2022-06-11

问题描述

我正在使用Material-UI组件创建一个应用，并且已按如下所示更改了主题中的颜色（在src / index.js中）：

const theme = createMuiTheme({
  palette: {
    pale: {
        main: '#FCF4D9',contrastText: '#383838'
    }
  }
})

ReactDOM.render(
 <ThemeProvider theme={theme}>
   <App />
 </ThemeProvider>,document.getElementById('root'))

然后，在我的组件之一中，我想使用它使应用程序栏具有浅色背景。我正在尝试执行以下操作（src / Header / index.js）：

const Header = () => {

  const theme = useTheme()
  
  return (
    <AppBar position="fixed" className="appBar" color={`${theme.palette.pale}`}>
      ...
    </AppBar>
  )
}

这不起作用-背景只会显示为白色。如果我将“ pale”重命名为“ primary”，然后使用

color="primary"

这很好，但是我已经有了另一种颜色，称为“主要”，所以我不能那样做。

我怀疑我在错误地编写模板字面量，但是我不确定-我尝试了括号，$符号等的各种其他组合，但这是唯一可以编译的组合。还是我只能在其中使用“主要”和“次要”，而不能使用主题属性？如果是这样，我该如何使用主题属性？

解决方法

我希望这会有所帮助，Material-UI可以让您自定义自己的主题。

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],},secondary: {
      main: green[500],pale: {
     main: '#FCF4D9',contrastText: '#383838',}
  },});

已更新

自定义主题后，可以根据组件的名称在组件上使用不同的颜色。 例如，在您的src/Header/index.js组件中，您可以执行以下操作：

const useTheme = makeStyles((theme) => ({
  header: {
    color: theme.pale.main,}));

const Header = () => {

    const theme = useTheme()

    return (
        <AppBar position="fixed" className="appBar" color={theme.header}>
        ...
        </AppBar>
    )
}
material-uireactjsreactjstemplate-literals