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

Question

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

但是，当我尝试添加多个FlatButton组件时，我收到一条错误消息，说我需要将它们包装在一个封闭的标签中。我已经同时使用了span和div，但效果相同。

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

Answer 1

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} />
  );
}

Answer 2

您应该使用getStyles的{​​{1}}并将样式传递给子组件（material-ui/AppBar/AppBar，FlatButton，...）。 要使用IconMenu，您需要在声明getStyles的情况下获取muiTheme。

注意：如果要同时使用FlatButton和IconMenu，则需要调整FlatButton顶部位置，因为FlatButton和IconMenu之间存在大小差异。 （contextTypes模式）

hasIconMenu == true

Answer 3

你应该这样做

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

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