Material UI AppBar 不使用主题颜色答案

【问题标题】：Material UI AppBar not using theme coloursMaterial UI AppBar 不使用主题颜色
【发布时间】：2019-11-29 09:29:20
【问题描述】：

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

【问题讨论】：

不确定actually use 是什么意思？例如，当您切换到灯光时，AppBar 应该是什么颜色？如果切换到黑暗怎么办？
文档声明（在上面的链接中）创建自定义调色板时，MUI 将自动设置提供的“主要”颜色的“深色”和“浅色”颜色
我的意思是，在设置AppBar color="primary"时，您的期望是：toggle light => using primary.light; toggle dark => using primary.dark，而现实是：toggle light/dark => both using primary.main？
我检查了源代码，AppBar的颜色控制如下，所以简而言之：它只会在defaultBackgroundColor, primary.main, secondary.main被设计之间变化，除非你专门控制它的颜色。下一条评论中的代码。
``` // 样式应用于根元素 if color="default" colorDefault: { backgroundColor: backgroundColorDefault, color: theme.palette.getContrastText(backgroundColorDefault), }, // if color="primary" colorPrimary : { backgroundColor: theme.palette.primary.main, color: theme.palette.primary.contrastText, }, // if color="secondary" colorSecondary: { backgroundColor: theme.palette.secondary.main, color: theme.palette.secondary .contrastText, }, ```

标签： javascript reactjs material-ui

【解决方案1】：

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

在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 hoc 包裹你的AppBar，这样你就可以在this.props 中访问theme；然后在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>

【讨论】：

对不起，Marson，我也无法正常工作。我也不明白它在做什么..
它检查已选择的主题并相应地为 Appbar 分配一个类。有效，但有一些语法问题。

【解决方案2】：

我也偶然发现了这一点，过了一会儿我意识到你真的必须为每个主题设置两种类型的调色板颜色 - 一种用于 white，一种用于 dark type - 为了利用 Mui 的自动渲染主题。

参见Material UI doc's 中的示例并在顶部的“暗/亮”按钮之间切换以查看不同的主要颜色值。 GIF example

据我了解，它将始终应用 Main 值颜色，至于 Light/Dark（调色板颜色）的目的更多的是用于临时开发人员想要自定义特定组件或元素的解决方案，如Mason Mao's answer。所以总结一下：深色/浅色调色板颜色与深色/浅色主题没有直接关联。

【讨论】：