材质设计顶部应用程序栏Javascript不工作

我对javascript导入以及webpack和babel之类的东西还不熟悉。所以，如果我的术语有误，我道歉

我试图让谷歌的材料设计与测试项目一起工作，但我似乎无法让它工作

css工作起来很简单，但是实例化却不需要花很多时间

我有一个按钮，只是为了确保它工作，我可以让它工作，只是没有顶部的应用程序栏

import {MDCTopAppBar} from '@material/top-app-bar';

import {MDCRipple} from '@material/ripple';

const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));

// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
            <span class="mdc-top-app-bar__title">Project</span>
            </section>
        </div>
    </header>

从'@material/top-app-bar'导入{MDCTopAppBar}；
从'@material/ripple'导入{mdclimpe}；
const buttonRipple=新的MDClimpe（document.querySelector（“.mdc button”）；
//实例化
const-topAppBarElement=document.querySelector（'.mdc-top-app-bar'）；
const topAppBar=新的MDCTopAppBar（topAppBarElement）；
项目

我的代码直接从复制，但菜单图标下面有一行，动画不会显示

有人能让这个工作吗？ 如果是，怎么做

---

我知道我无法从codepen上的本地文件导入内容，但是如果有人来找我并想知道该怎么办。谷歌文档中的代码正在使用，而不是使用

在他们的演示页面上，他们有正确的代码

更改此项：

<a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>

为此：

<button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon">menu</button>

菜单