Как добавить Material-ui App Bar в компонент класса? - PullRequest
0 голосов
/ 20 ноября 2018

Я пытаюсь добавить панель приложения из Material-ui (https://material -ui.com / demos / app-bar / ) в мой компонент NavBar.Примеры Material-ui создают функцию и экспортируют ее.

class App extends Component {
render() {
return (
  <div>
    <NavBar />
  </div>
);
}
}

Компонент NavBar должен возвращать панель приложения из примера Material.

class NavBar extends Component {

render() {
    return (
        //App Bar from material.
    )
}
}

export default NavBar;

До сих пор я пытался создатьИспользуйте const и используйте его в компоненте navbarпоместите его рядом с меткой новостей.

1 Ответ

0 голосов
/ 20 ноября 2018

Заворачиваете ли вы компонент 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 здесь .

...