Jak dodać wiele elementów do komponentu AppBar modułu Material-UI?

Question

Chcę mieć wiele komponentów FlatButton w AppBar Material-UI i zachować styl, więc wygląda to tak (z wieloma przyciskami).

Jednak gdy próbuję dodać wiele składników FlatButton, pojawia się błąd mówiąc muszę zawinąć je w tagu okalającego. Użyłem zarówno span jak i div z tymi samymi złymi wynikami.

Czy istnieje sposób, aby zachować styl zarówno w AppBar jest w zamykającym znacznikiem lub innego sposobu, aby dodać wiele elementów do samego AppBar, aby uzyskać pożądany efekt?

Answer 1

Wpadam na ten sam problem i rozwiązałem go przy użyciu dzieci AppBar. Może trzeba naprawić stylizacji z przycisków, aby wyglądały identyczne z oryginalnymi

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

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

Answer 2

powinien to zrobić

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

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

Answer 3

iconRightElement musi być pojedynczy element, więc po prostu trzeba owinąć przycisków w div tak:

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 4

należy użyć getStyles z material-ui/AppBar/AppBar i przekazać styl do elementu dziecka (FlatButton, IconMenu, ...). Aby użyć getStyles, musisz uzyskać muiTheme w kontekście z deklaracją contextTypes.

UWAGA: Jeśli chcesz używać zarówno FlatButton, jak i IconMenu, musisz dostosować najwyższą pozycję FlatButton ze względu na wielkość różnicy między FlatButton i IconMenu. (hasIconMenu == true wzór)

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