抽屉不适用于 `mdl-layout--fixed-header` class

Question

经营得很好：

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 class。要使用固定 header，插入 class mdl-layout--fixed-header 停止工作抽屉。这个用法有什么问题吗？

Answer 1

嗯...

我找到了原因。

使用时 mdl-layout--fixed-header class,

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

不需要。

:(

非常感谢。

抽屉不适用于 `mdl-layout--fixed-header` class

Drawer not working with `mdl-layout--fixed-header` class

javascript

css

reactjs

material-design-lite