javascript - react - menuitem material ui

¿Cómo agregar varios elementos al componente AppBar de Material-UI?

Question

Quiero tener varios componentes FlatButton en la barra de aplicaciones de UI de materiales y conservar el estilo, para que se vea así (con varios botones).

Sin embargo, cuando intento agregar varios componentes FlatButton, aparece un error que dice que necesito envolverlos en una etiqueta adjunta. He usado un span y un div con los mismos malos resultados.

¿Hay alguna manera de preservar el estilo de la Barra de Aplicaciones en la etiqueta adjunta o una forma diferente de agregar múltiples elementos a la Barra de la Aplicación para obtener el efecto deseado?

Answer 1

Debe usar getStyles of material-ui/AppBar/AppBar y pasar el estilo al componente hijo ( FlatButton , IconMenu , ...). Para utilizar getStyles , necesita obtener muiTheme en contexto con la declaración de contextTypes .

NOTA: Si desea utilizar tanto FlatButton como IconMenu, debe ajustar la posición superior de FlatButton debido a la deferencia de tamaño entre FlatButton y IconMenu. ( hasIconMenu == true patrón 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>
    );
  }

Answer 2

El elemento IconRightElement debe ser un solo elemento, por lo que solo necesita envolver sus botones en una división como esta:

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 3

Me encuentro con el mismo problema y lo resolví usando niños AppBar. Es posible que deba arreglar el estilo de los botones para que se vean idénticos a los originales

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

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

Answer 4

Usted debe hacer esto

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

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