如何向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

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

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

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