javascript - 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>
  )}

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