css - 结合 vue Material 和 vue cli webpack 模板时，表单元素显示透明

Question

我在 vue CLI 创建的 vue 元素中使用 md-buttons、md-select 或 md-field 时遇到问题来自 webpack 模板。

我有一个 MWE 的情况 here ，结合vue-cli模板，结合vue-cli模板，在每种类型的表单项上提供了vue素材网站的三个介绍示例。它看起来不太好，但如果你运行它，它会分解如下:

1. 第一行是一组单选按钮；然而，按钮是不可见的(但你可以点击它们，获得涟漪效果并且正确的值由 vue 记录)
2. 接下来是一个选择框；但是，框的背景是透明的。
3. 最后有几个文本框；但是，轮廓似乎是透明的。

我可以通过插入样式 block 来解决选择框的问题

<style>
  .md-menu-content-container {
    background-color: white;
  }
</style>

这将使 md-select 按预期工作。我仍然决定将它包括在这里，因为它似乎与其他问题相关并且可能有共同的起源。

不幸的是，我还没有想出如何解决其他问题或修改哪个属性来“修补”问题。因此，非常感谢任何帮助或指点。

Answer 1

似乎在使用最新版本的 vue-material 时，必须显式加载默认模板。因此添加

import 'vue-material/dist/theme/default.css'

从 vue-cli 到 main.js 文件似乎解决了这个问题。