blocks|key|4476119|text|我遇到了同样的问题，并使用AppBar子代解决了它。您可能需要修复按钮的样式，使其看起来与原始按钮相同|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4476120|render()+{
++var+buttonStyle+=+{
++++backgroundColor:+'transparent',
++++color:+'white'
++};

++return+(
++++<AppBar+title="React+seed">
++++++<FlatButton+label="About"+style={buttonStyle}+/>
++++++<FlatButton+label="Home"+style={buttonStyle}+/>
++++</AppBar>
++)}|code-block|syntax|javascript|4476121|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I run into the same issue, and solved it using AppBar children. You might need to fix the styling of the buttons to make them look identical to the original ones</p>

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

  return (
    &lt;AppBar title="React seed"&gt;
      &lt;FlatButton label="About" style={buttonStyle} /&gt;
      &lt;FlatButton label="Home" style={buttonStyle} /&gt;
    &lt;/AppBar&gt;
  )}
</code></pre>


blocks|key|4476126|text|你应该这样做|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4476127|render()+{
++++const+buttonStyle+=+{
++++++++backgroundColor:+'transparent',
++++++++color:+'white'
++++};

++++return+(
++++++++<AppBar+title="React+seed"+iconRightElement={
++++++++++++<FlatButton+label="About"+style={buttonStyle}+/>
++++++++++++<FlatButton+label="Home"+style={buttonStyle}+/>
+++++++++}+/>
++++)
}|code-block|syntax|javascript|4476128|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You should do this</p>

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

    return (
        &lt;AppBar title="React seed" iconRightElement={
            &lt;FlatButton label="About" style={buttonStyle} /&gt;
            &lt;FlatButton label="Home" style={buttonStyle} /&gt;
         } /&gt;
    )
}
</code></pre>


blocks|key|4476938|text|iconRightElement必须是单个元素，所以您只需要将按钮包装在一个div中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4476939|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}+/>
++);
}|code-block|syntax|javascript|4476940|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The iconRightElement must be a single element, so you just need to wrap your buttons in a div like this:</p>

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

  const rightButtons = (
    &lt;div&gt;
      &lt;FlatButton label="About" style={buttonStyle} /&gt;
      &lt;FlatButton label="Home" style={buttonStyle} /&gt;
    &lt;/div&gt;
  );

  return (
    &lt;AppBar title="React seed" iconRightElement={rightButtons} /&gt;
  );
}
</code></pre>


blocks|key|4476176|text|您应该使用material-ui/AppBar/AppBar的getStyles并将样式传递给子组件(FlatButton，IconMenu，...)。为了使用getStyles，您需要通过contextTypes声明在上下文中获取muiTheme。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4476177|注意:如果您想同时使用FlatButton和IconMenu，则需要调整FlatButton顶部位置，因为FlatButton和IconMenu之间存在大小差异。(hasIconMenu+==+true模式)|4476178|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>
++++);
++}|code-block|syntax|javascript|4476179|entityMap^0|5|P|V|9|1F|A|1Q|8|28|9|2N|C|38|8|0|2A|J|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$]]

<p>You should use <code>getStyles</code> of <code>material-ui/AppBar/AppBar</code> and pass the style to child component (<code>FlatButton</code>, <code>IconMenu</code>, ...).
In order to use <code>getStyles</code>, you need to get <code>muiTheme</code> in context with declaration of <code>contextTypes</code>.</p>

<p>NOTE: If you want to use both FlatButton and IconMenu, you need to adjust FlatButton top position because of size deference between FlatButton and IconMenu. (<code>hasIconMenu == true</code> pattern)</p>

<pre><code>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 = (
        &lt;IconMenu
          iconStyle={styles.iconButtonIconStyle}
          iconButtonElement={&lt;IconButton&gt;&lt;MoreVertIcon /&gt;&lt;/IconButton&gt;}
          targetOrigin={{horizontal: 'right', vertical: 'top'}}
          anchorOrigin={{horizontal: 'right', vertical: 'top'}}
        &gt;
          &lt;MenuItem primaryText="Refresh" /&gt;
          &lt;MenuItem primaryText="Help" /&gt;
          &lt;MenuItem primaryText="Sign out" /&gt;
        &lt;/IconMenu&gt;
      );
    }
    const rightIcons = (
      &lt;div&gt;
        &lt;FlatButton label="My Channels" style={styles.flatButton} /&gt;
        &lt;FlatButton label="Favorite" style={styles.flatButton} /&gt;
        &lt;FlatButton label="Login" style={styles.flatButton} /&gt;
        {iconMenu}
      &lt;/div&gt;
    );

    return (
      &lt;div&gt;
        &lt;AppBar
          title="Title"
          iconElementRight={rightIcons}
        /&gt;
        {this.props.children}
      &lt;/div&gt;
    );
  }
</code></pre>


<p>I want to have multiple FlatButton components in the Material-UI AppBar and preserve the style, so it looks like this (with multiple buttons).</p>

<p><a href="https://i.stack.imgur.com/AyOLr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AyOLr.png" alt=""></a></p>

<p>However, when I try to add multiple FlatButton components, I get an error saying I need to wrap them in an enclosing tag. I've used both a span and a div with the same bad results.</p>

<p><a href="https://i.stack.imgur.com/5dQcO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5dQcO.png" alt="enter image description here"></a></p>

<p>Is there a way to either preserve the AppBar's style in the enclosing tag or a different way to add multiple elements to the AppBar itself to get the desired effect?</p>


How do you add multiple elements to Material-UI's AppBar component?

我希望在Material-UI AppBar中有多个FlatButton组件，并保留样式，所以它看起来像这样(有多个按钮)。​​但是，当我尝试添加多个FlatButton组件时，我收到一个错误，提示我需要将它们封装在一个封闭标记中。我同时使用了span和div，结果都很糟糕。​​有没有一种方法可以在封闭标记中保留App...

问如何在Material-UI的AppBar组件中添加多个元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Material-UI的AppBar组件中添加多个元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Material-UI的AppBar组件中添加多个元素？
EN