Как переместить NavLink на правую сторону в AppBar?

Question

<AppBar position="static" className={this.props.classes.appBar}>
<Toolbar
  style={{
    margin: "0 auto",
    width: "80%"
  }}
>
  <Link to="/">
    <img src={logo} alt="logo" width="65" height="48" />
  </Link>

    <NavLink
      to="/about"
      className={this.props.classes.link}
      activeClassName={this.props.classes.activeMenu}
    >

Как мне переместить NavLink на правую сторону? Я пробовал с edge, но это не работает. Доступно только для ImageButton.

Answer 1

Один из подходов состоит в том, чтобы использовать Grid-контейнер и обернуть ваши компоненты в элемент Grid следующим образом

<AppBar position="static">
  <Toolbar
    style={{
      margin: "0 auto",
      width: "80%"
    }}
  >
    <Grid direction="row" justify="space-between" alignItems="center" container>
      <Grid item>
        <Link to="/">
           <img src={logo} alt="logo" width="65" height="48" />
        </Link>
      </Grid>
      <Grid item>
        <NavLink
            to="/about"
            className={this.props.classes.link}
            activeClassName={this.props.classes.activeMenu}
        >
          // the rest of the code goes here
      </Grid>
    </Grid>
  </Toolbar>
</AppBar>;

Компонент Grid использует flex и может быть настроен для работы так, как вам нужно, в вашем случае justify установлен на space-between, что означает, что элементы будут перемещены к краю контейнера и разделены пробелом между ними.

Подробнее о Grid и выравнивающих элементах можно найти в документации ЗДЕСЬ