抽屉不适用于“mdl-layout--fixed-header”类答案

【问题标题】：Drawer not working with `mdl-layout--fixed-header` class抽屉不适用于“mdl-layout--fixed-header”类
【发布时间】：2015-10-24 10:49:03
【问题描述】：

运行良好：

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

但是，它现在不工作了：

class Layout extends React.Component {
  render() {
    return <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <div className="mdl-layout__header">
        <div className="mdl-layout__header-row">
          <span className="mdl-layout-title">Remember</span>
        </div>
      </div>

      <div className="mdl-layout__drawer">
        <span className="mdl-layout-title">Remember</span>
        <div className="mdl-navigation">
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
          <a className="mdl-navigation__link" href="">Link</a>
        </div>
      </div>

      <div className="mdl-layout__drawer-button">
        <i className="material-icons">menu</i>
      </div>

      <div className="mdl-layout__content">
        <div className="page-content">{this.props.children}</div>
      </div>
    </div>;
  }
}

两个代码块的区别只是mdl-layout--fixed-header类。要使用固定标题，插入类mdl-layout--fixed-header 停止工作抽屉。这个用法有问题吗？

【问题讨论】：

标签： javascript css reactjs material-design-lite

【解决方案1】：

嗯……

我找到了原因。

使用mdl-layout--fixed-header类时，

<div className="mdl-layout__drawer-button">
  <i className="material-icons">menu</i>
</div>

不需要。

非常感谢。

【讨论】：