如何解决如何更改Material-UI AppBar背景色?
我正在使用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>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。