如何将多个元素添加到Material-UI的AppBar组件?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (15)

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

但是,当我试图添加多个FlatButton组件时,我会发现一个错误,即我需要将它们封装在一个封闭的标记中。我使用了一个span和一个div,结果都是一样的。

是否有一种方法可以在封闭标签中保留AppBar的样式,或者有一种不同的方式将多个元素添加到AppBar本身以获得所需的效果?

提问于
用户回答回答于

我遇到了同样的问题,并使用AppBar子类解决了这个问题。您可能需要修复按钮的样式,使其看起来与原始按钮相同。

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

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

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

扫码关注云+社区