web-dev-qa-db-ja.com

Material-UIのAppBarコンポーネントに複数の要素をどのように追加しますか？

Material-UI AppBarに複数のFlatButtonコンポーネントを配置し、スタイルを維持したいので、次のようにします（複数のボタンを使用）。

しかし、複数のFlatButtonコンポーネントを追加しようとすると、それらを囲みタグでラップする必要があるというエラーが表示されます。私はスパンとdivの両方を使用しましたが、結果は同じです。

enter image description here

囲んでいるタグでAppBarのスタイルを維持する方法、またはAppBar自体に複数の要素を追加して目的の効果を得る別の方法のいずれかがありますか？

javascriptcssreactjsmaterial-designmaterial-ui
20
Joe Martella

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

同じ問題が発生し、AppBarの子を使用して解決しました。ボタンのスタイルを修正して、元のボタンと同一に見えるようにする必要がある場合があります。

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

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

material-ui/AppBar/AppBarのgetStylesを使用して、スタイルを子コンポーネント（FlatButton、IconMenu、...）に渡す必要があります。 getStylesを使用するには、muiThemeを宣言してcontextTypesを取得する必要があります。

注：FlatButtonとIconMenuの両方を使用する場合は、FlatButtonとIconMenuのサイズが異なるため、FlatButtonの上部位置を調整する必要があります。 （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>
    );
  }
2
kumabook