Заворачиваете ли вы компонент NavBar
в withStyles
HOC, как в примере с материалом?Похоже, вы пытаетесь использовать объект styles
непосредственно в className
, который не будет работать так, как вы ожидаете.Вы должны передать стили в свой NavBar
компонент, используя withStyles
, например:
export default withStyles(styles)(NavBar);
Затем получите доступ к стилям в NavBar
из classes
prop:
render() {
const { classes } = this.props;
return (
<AppBar position="static">
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
News
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
);
}
withStyles
HOC регистрирует ваш объект styles
как CSS и передает имена классов в упакованный компонент (в данном случае NavBar
), чтобы вы могли использовать их в функции рендеринга.Вы можете найти больше информации о withStyles
в Material-UI здесь .