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

Posted

技术标签:

【中文标题】如何向 Material-UI 的 AppBar 组件添加多个元素?【英文标题】:How do you add multiple elements to Material-UI's AppBar component? 【发布时间】:2015-11-05 21:52:27 【问题描述】:

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

但是,当我尝试添加多个 FlatButton 组件时,我收到一条错误消息,提示我需要将它们包装在封闭标记中。我同时使用了 span 和 div,结果同样糟糕。

有没有办法在封闭标记中保留 AppBar 的样式,或者以不同的方式向 AppBar 本身添加多个元素以获得所需的效果?

【问题讨论】:

【参考方案1】:

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

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

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

【讨论】:

如果您这样做,您的组件将不会垂直居中。您可以将 flatbuttons 添加到 iconRightElement 道具 我相信那是 iconElementRight:material-ui.com/#/components/app-bar【参考方案2】:

你应该这样做

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

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

【讨论】:

这不起作用,抛出一个解析错误并且AppBar参数应该是iconElementRight【参考方案3】:

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

【讨论】:

我觉得现在应该是iconElementRight【参考方案4】:

您应该使用material-ui/AppBar/AppBargetStyles 并将样式传递给子组件(FlatButtonIconMenu,...)。 为了使用getStyles,您需要在声明contextTypes 的上下文中获取muiTheme

注意:如果您想同时使用 FlatButton 和 IconMenu,您需要调整 FlatButton 顶部位置,因为 FlatButton 和 IconMenu 之间的大小不同。 (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>
    );
  

【讨论】:

以上是关于如何向 Material-UI 的 AppBar 组件添加多个元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何更改 Material-UI AppBar 的明暗主题颜色?

如何连接 Algolia 和 @material-ui

添加带有材质表的组件更改 Material-UI AppBar 样式

Material-ui AppBar。滚动时更改颜色。反应

Material UI - 在 AppBar 点击打开 LeftNav / Drawer

如何从一个小部分的材质 UI AppBar 中删除高程(框阴影)?