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

Question

我正在使用 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"

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

我怀疑我做错了模板字面量，但我不确定 - 我已经尝试了方括号、$ 符号等的各种其他组合，但这是唯一可以编译的组合。还是只能用“primary”和“secondary”，不能用主题属性？如果可以，如何使用主题属性?

Answer 1

希望对您有所帮助，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-UI AppBar 背景颜色？

How do I change the Material-UI AppBar background colour?

reactjs

material-ui

template-literals