21

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

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

在此处输入图像描述

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

4

4 回答 4

11

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} />
  );
}
于 2016-11-16T14:15:30.603 回答
8

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

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

  return (
    <AppBar title="React seed">
      <FlatButton label="About" style={buttonStyle} />
      <FlatButton label="Home" style={buttonStyle} />
    </AppBar>
  )}
于 2015-09-20T00:42:21.870 回答
2

您应该使用getStylesofmaterial-ui/AppBar/AppBar并将样式传递给子组件 ( FlatButton, IconMenu, ...)。为了使用getStyles，您需要muiTheme了解contextTypes.

注意：如果你想同时使用 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>
    );
  }
于 2017-02-16T14:43:49.317 回答
-2

你应该做这个

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

    return (
        <AppBar title="React seed" iconRightElement={
            <FlatButton label="About" style={buttonStyle} />
            <FlatButton label="Home" style={buttonStyle} />
         } />
    )
}
于 2016-08-23T16:40:36.150 回答