javascript - react MDL : No drawer button with standalone drawer

Question

我正在使用基本的 React 设置和 React mdl ( https://react-mdl.github.io/react-mdl ) 组件构建一个带有布局的 Web View 。当然，我的模板上确实有 mdl css。我想将 React MDL 中的抽屉组件与我的自定义布局一起使用。到目前为止，我的布局中有这个:

<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <Header/>
  <Drawer title="Title">
   <Navigation>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
   </Navigation>
  </Drawer>
</div>

渲染抽屉:

<div class="mdl-layout__drawer">
  <span class="mdl-layout-title">Title</span>
  <nav class="mdl-navigation">
    <a href="" class="mdl-navigation__link">Link</a>
    <a href="" class="mdl-navigation__link">Link</a>
    <a href="" class="mdl-navigation__link">Link</a>
    <a href="" class="mdl-navigation__link">Link</a>
  </nav>
</div>

问题是它渲染正常，但没有生成抽屉按钮。在 demo layout 在抽屉 div 旁边生成一个带有 mdl-layout__drawer-button 类的 div，并在布局末尾生成一个带有 mdl-layout__obfuscator 类的 div。

Answer 1

我遇到了同样的问题，因为我使用 material-design-lite 的脚本而不是 react-mdl 的脚本犯了一个错误。

import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'

希望这有帮助!