概述

我正在为一个朋友开发一个网站（多页），我决定使用 Google 的 Web 材料设计组件 (MDC) 作为其样式的基础。我希望它使用 Functions 和 Hosting 托管在 Firebase 上。

我已经研究了一个多星期，并且已经到了可以使用Node.js、Express和EJS呈现多个页面的地步，但我似乎无法理解 MDC 将如何发挥作用这种环境。

问题

你以前看过这个作品吗？如果是这样，它是如何完成的，我应该从哪里开始？

边注

我已经能够使用这个 quide让它在本地运行。这是使这项工作的主要文件：

webpack.config.js

索引.html

包.json

应用程序.scss

我目前正在使用“手动实例化”方法，效果很好。我注意到“自动实例化”方法，但无法让它工作。使用这种方法究竟需要什么？

当我使用代码时：

我收到错误日志记录：“未捕获的 ReferenceError：未定义 mdc”。

参考这里： https ://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs#automatic-instantiation

谢谢。

我有一个运行 Rails 5 的应用程序。我正在使用 mdc 组件进行样式设置。我有一个调用 new mdc.mdcTextFeild(.....) 的 javascript 函数

这在浏览器环境中运行良好。但是在使用带有 poltergeist 驱动程序的 capybara 进行测试时，我能够看到我的 application-XXXXXX.js 存在于 HTML 中，但是，它会抛出 Reference error mdc not found！

我正在使用 web-pack 加载 mdc 组件。它正在正确编译并加载脚本。然而，在 poltergeist 中的 window 对象并没有定义 mdc！

我正在使用 Android P 并针对 AndroidX 进行编译。在调试/测试版中效果很好，但是当我发布时，我在运行时遇到了一个神秘的崩溃：

2018-06-24 00:21:26.080 11971-11971/? E/LoadedApk：无法实例化 appComponentFactory java.lang.ClassNotFoundException：在路径上找不到类“androidx.core.app.CoreComponentFactory”：DexPathList [[zip 文件“/data/app/app.itsyour.elegantstocks-EuVZWdDgzplhm0Hpa90VwA= =/base.apk"],nativeLibraryDirectories=[/data/app/app.itsyour.elegantstocks-EuVZWdDgzplhm0Hpa90VwA==/lib/x86, /system/lib]] 在 dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:126 ) 在 java.lang.ClassLoader.loadClass(ClassLoader.java:379) 在 java.lang.ClassLoader.loadClass(ClassLoader.java:312) 在 android.app.LoadedApk.createAppFactory(LoadedApk.java:226) 在 android.app .LoadedApk.createOrUpdateClassLoaderLocked(LoadedApk.java:731) 在 android.app.LoadedApk。858) 2018-06-24 00:21:26.145 1667-1854/? E/SurfaceFlinger: ro.sf.lcd_density 必须定义为构建属性 2018-06-24 00:21:26.233 1667-1703/? E/SurfaceFlinger: ro.sf.lcd_density 必须定义为构建属性 2018-06-24 00:21:29.627 1796-1913/? E/TaskPersister：访问最近目录的文件错误（目录不存在？）。2018-06-24 00:21:30.087 11971-11971/? E/AndroidRuntime：致命异常：主进程：app.itsyour.elegantstocks，PID：11971 java.lang.IllegalArgumentException：指定为非空的参数为空：方法 cdbhb，app.itsyour.elegantstocks.aba 中的参数 $receiver（未知来源：2）在 app.itsyour.elegantstocks.feature.navigator.ba$aa（未知来源：24）在 app.itsyour.elegantstocks.feature.navigator.baa（未知来源：13）在 app。20670) 在 android.widget.LinearLayout.layoutVertical(LinearLayout.java:1656) 在 android.widget.LinearLayout.setChildFrame(LinearLayout.java:1812) 在 android.view.ViewGroup.layout(ViewGroup.java:6194) 在 android. widget.LinearLayout.onLayout(LinearLayout.java:1565) 在 android.view.View.layout(View.java:20670) 在 android.view.ViewGroup.layout(ViewGroup.java:6194) 在 android.widget.FrameLayout.layoutChildren (FrameLayout.java:323) 在 com.android.internal.policy.DecorView.onLayout(DecorView.java:753) 在 android.view.View.layout( View.java:20670) 2018-06-24 00:21:30.087 11971-11971/? E/AndroidRuntime：在 android.view 的 android.view.ViewGroup.layout(ViewGroup.java:6194)。java:6642) 在 java.lang.reflect.Method.invoke(Native Method) 在 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493) 在 com.android.internal.os.ZygoteInit。主要（ZygoteInit.java:858）2018-06-24 00:21:30.137 1796-1880/？E/InputDispatcher: 频道 '5896582 app.itsyour.elegantstocks/app.itsyour.elegantstocks.feature.navigator.NavigatorActivity (server)' ~ 频道已不可恢复地损坏，将被处置！2018-06-24 00:21:30.253 5198-9377/? E/EntrySyncManager：无法确定帐户名称：删除请求 2018-06-24 00:21:30.253 5198-9377/？E/NowController：无法从 EntryProvider 访问数据。执行异常。java.util.concurrent.ExecutionException：com.google.android.apps.gsa.sidekick.main.hn：无法完成刷新条目的计划请求。FutureTask.run(FutureTask.java:266) at com.google.android.apps.gsa.shared.util.concurrent.bgrun(Unknown Source:4) at com.google.android.apps.gsa.shared.util.concurrent .b.aw.run(SourceFile:4) at com.google.android.apps.gsa.shared.util.concurrent.b.aw.run(SourceFile:4) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor .java:1167) 在 java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641) 在 java.lang.Thread.run(Thread.java:764) 在 com.google.android.apps.gsa。 shared.util.concurrent.birun(SourceFile:6) 原因：com.google.android.apps.gsa.sidekick.main.hn：无法完成刷新条目的计划请求。ClientErrorCode: 3 at com.google.android.apps.gsa.staticplugins.nowstream.baaq.az（未知来源：

我的 gradle 文件。项目等级：

应用分级：

前卫：

MDC Web 组件使用 Webpack 来呈现网站。
我想在它所服务的 HTML (.ejs) 文件中使用 MDC 时使用适当的 node.js 后端。我应该如何在项目中同时使用 MDC 和 node.js 后端？

MDC Web 文档没有与后端（甚至是节点后端）连接相关的任何信息。MDC web 用来npm start启动服务器，而我们需要用来node app启动服务器本身。有没有什么方法可以让 MDCnode app与后端一起运行？

PS：我正在使用 express.js、mognoose、mocha、body-parser 和 ejs

我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 概述的文本字段（带有前导图标） 。Material.io 网站显示了某些组件的 JavaScript 代码，但不显示其他组件。如何在我的 HTML 项目中添加概述的文本字段组件？

下面是我的代码：

这段代码的小提琴：jsfiddle

我正在尝试向我的网站添加一个基本的 MDC 选择菜单。但它并不完全正确——框的右侧显示了 MDC 箭头以及正常的 HTML 箭头，并且这些词放置在离菜单标签太近的位置（参见此处）。

HTML 部分——</p>

app.scss 部分

和最后的 app.js 部分

似乎我拥有我需要的一切，但我显然错过了一些愚蠢的东西。任何建议表示赞赏 - 谢谢！

我无法安装分叉的 git 存储库。我想安装版本#0.31.0。

我收到以下错误：

这必须是一个名字package.json吗？

我们正在使用 MDC 菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。

我尝试将一个类应用于 mdc-list-item 并将光标指定为自动，但它不起作用。

下面是示例小提琴

https://jsfiddle.net/phani25485/Lt6q2gxa/2/

您能否就如何实现这一目标提供一些指导。

我的应用程序中有一个主要活动，其中包含来自 Material Design Components的新底部应用程序栏。在用户交互中，我替换了不同的片段。

为了让用户知道他们在应用程序中的当前位置，我决定将底部应用程序栏的标题设置为与片段的标题相同。但是，我无法设置标题，在看到实现时我发现“底部应用栏不能有标题”。

我想知道在这种情况下我应该如何让用户知道他在应用程序中的位置，或者是否有任何方法可以设置底部应用程序栏的标题。