javascript - Material UI AppBar 不使用主题颜色

Question

我正在使用 Material UI v4.7.0。

我使用 createMuiTheme() 创建了一个主题(见下文)设置了主要和次要自定义颜色。

我有一个 AppBar(见下文)。当我设置 color在此为默认值，并切换主题，它只在黑白之间变化!

如果我设置 color="primary" , 它只显示在 main原色。如果我指定 light，情况也是如此。和 dark主调色板中的颜色(这就是我知道主题正确导入的方式)。

它只是不会因主题而改变!

不仅如此，body 标签和 Paper 组件上的背景颜色也只有黑色或白色阴影(取决于主题)。

文档(https://material-ui.com/customization/palette/)绝对没用!

有人可以帮助我如何为我的应用程序设置主题并拥有 MUI 实际上用它？

这是 NavBar 代码(假设导入都在那里，它们是):

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
    },
    logo: {
        height: getToolbarLogoHeight()
    },
    menuButton: {
        marginRight: theme.spacing(2),
        [theme.breakpoints.up('sm')]: {
            display: 'none',
        },
    }
}));

const NavBar = () => {
    const theme = useTheme();

    const { isAuthenticated } = useContext(AuthContext);
    const classes = useStyles();
    const Logo = theme.palette.type === 'light' ? LogoLight : LogoDark;

    console.log(theme);

    return (
        <AppBar position="sticky" color="default" className={classes.root}>
            <Toolbar>
                <IconButton className={classes.menuButton}>
                    <FontAwesomeIcon icon={faBars}/>
                </IconButton>

                <Link to="/" style={{ flexGrow: 1 }}>
                    <img alt="logo" src={Logo} className={classes.logo}/>
                </Link>

                {
                    isAuthenticated &&
                    <TopLinks/>
                }
            </Toolbar>
        </AppBar>
    );
};

export default NavBar;

这是我的主题:

export const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#2c3c52'
        },
        secondary: {
            main: '#94c93d'
        },
        type: 'dark'
    }
});

export const getToolbarLogoHeight = () => {
    return theme.mixins.toolbar.minHeight - 10;
};

export default theme;

Answer 1

我认为您需要制作自己的 AppBar 组件。我正在使用组件样式而不是钩子(Hook)样式来编写此内容。

在 styles你需要

const styles = theme => ({
  lightMode: {
    backgroundColor: theme.palette.primary.light,
    color: theme.palette.primary.contrastText,
  }
  darkMode: {
    backgroundColor: theme.palette.primary.dark,
    color: theme.palette.primary.contrastText,
  }
});

然后用 withTheme 包裹你的 AppBar hoc，因此您可以访问 theme在这个.props;然后在 render()

const { theme } = this.props;
return (
  <AppBarFromMui
    className={clsx(
      [classes.lightMode]: theme.palette.type ==='light',
      [classes.darkMode]: theme.palette.type ==='dark',
    )}
  >
    {children or something}
  </AppBarFromMui>