javascript 如何在 Material-UI 的 AppBar 组件中添加多个元素？

How do you add multiple elements to Material-UI's AppBar component?

提问by Joe Martella

I want to have multiple FlatButton components in the Material-UI AppBar and preserve the style, so it looks like this (with multiple buttons).

我想在 Material-UI AppBar 中有多个 FlatButton 组件并保留样式，所以它看起来像这样（有多个按钮）。

However, when I try to add multiple FlatButton components, I get an error saying I need to wrap them in an enclosing tag. I've used both a span and a div with the same bad results.

但是，当我尝试添加多个 FlatButton 组件时，出现错误，提示我需要将它们包装在封闭标记中。我使用了 span 和 div，结果都一样糟糕。

Is there a way to either preserve the AppBar's style in the enclosing tag or a different way to add multiple elements to the AppBar itself to get the desired effect?

有没有办法在封闭标签中保留 AppBar 的样式，或者以不同的方式将多个元素添加到 AppBar 本身以获得所需的效果？

回答by Branon Barrett

The iconRightElement must be a single element, so you just need to wrap your buttons in a div like this:

iconRightElement 必须是单个元素，因此您只需要将按钮包装在一个 div 中，如下所示：

render() {
  const buttonStyle = {
    backgroundColor: 'transparent',
    color: 'white'
  };

  const rightButtons = (
    <div>
      <FlatButton label="About" style={buttonStyle} />
      <FlatButton label="Home" style={buttonStyle} />
    </div>
  );

  return (
    <AppBar title="React seed" iconRightElement={rightButtons} />
  );
}

回答by Oren Pinsky

I run into the same issue, and solved it using AppBar children. You might need to fix the styling of the buttons to make them look identical to the original ones

我遇到了同样的问题，并使用 AppBar children 解决了它。您可能需要修复按钮的样式，使它们看起来与原始按钮相同

render() {
  var buttonStyle = {
    backgroundColor: 'transparent',
    color: 'white'
  };

  return (
    <AppBar title="React seed">
      <FlatButton label="About" style={buttonStyle} />
      <FlatButton label="Home" style={buttonStyle} />
    </AppBar>
  )}

回答by kumabook

You should use getStylesof material-ui/AppBar/AppBarand pass the style to child component (FlatButton, IconMenu, ...). In order to use getStyles, you need to get muiThemein context with declaration of contextTypes.

您应该使用getStyles的material-ui/AppBar/AppBar和风格传递给子组件（FlatButton，IconMenu，...）。为了使用getStyles，你需要获得muiTheme在上下文中的声明contextTypes。

NOTE: If you want to use both FlatButton and IconMenu, you need to adjust FlatButton top position because of size deference between FlatButton and IconMenu. (hasIconMenu == truepattern)

注意：如果您想同时使用 FlatButton 和 IconMenu，您需要调整 FlatButton 顶部位置，因为 FlatButton 和 IconMenu 之间的大小差异。（hasIconMenu == true图案）

import React             from 'react';
import AppBar            from 'material-ui/AppBar';
import { getStyles }     from 'material-ui/AppBar/AppBar';
import MenuItem          from 'material-ui/MenuItem';

class App extends React.Component {
  static get contextTypes() {
    return { muiTheme: React.PropTypes.object.isRequired };
  }
  render() {
    const styles = getStyles(this.props, this.context);
    const { button: { iconButtonSize }} = this.context.muiTheme;
    const { appBar } = this.context.muiTheme;
    const hasIconMenu = false;
    let iconMenu = null;
    if (hasIconMenu) {
      styles.flatButton.top = -styles.flatButton.marginTop;
      styles.flatButton.marginTop = 0;
      iconMenu = (
        <IconMenu
          iconStyle={styles.iconButtonIconStyle}
          iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        >
          <MenuItem primaryText="Refresh" />
          <MenuItem primaryText="Help" />
          <MenuItem primaryText="Sign out" />
        </IconMenu>
      );
    }
    const rightIcons = (
      <div>
        <FlatButton label="My Channels" style={styles.flatButton} />
        <FlatButton label="Favorite" style={styles.flatButton} />
        <FlatButton label="Login" style={styles.flatButton} />
        {iconMenu}
      </div>
    );

    return (
      <div>
        <AppBar
          title="Title"
          iconElementRight={rightIcons}
        />
        {this.props.children}
      </div>
    );
  }

回答by Golinmarq

You should do this

你应该做这个

render() {
    const buttonStyle = {
        backgroundColor: 'transparent',
        color: 'white'
    };

    return (
        <AppBar title="React seed" iconRightElement={
            <FlatButton label="About" style={buttonStyle} />
            <FlatButton label="Home" style={buttonStyle} />
         } />
    )
}