элементы формы выглядят прозрачными при объединении материала vue и шаблона веб-пакета vue cli

Question

У меня проблема при использовании md-buttons, md-select или md-field в проекте vue, созданном vue CLI из шаблона веб-пакета.

У меня MWE ситуации здесь , где представлены три вводных примера с веб-сайта vue material для каждого типа элемента формы в сочетании с шаблоном vue-cli.Это выглядит не очень хорошо, но если вы запустите его, оно будет выглядеть следующим образом:

1. Первый ряд представляет собой набор переключателей;однако кнопки невидимы (но вы можете нажимать на них, получать эффект ряби и правильное значение записывается с помощью vue)
2. Далее следует поле выбора;однако фон коробки прозрачен.
3. Наконец, есть несколько текстовых полей;однако, контуры кажутся прозрачными.

Я могу решить проблему с полями выбора, вставив блок стилей

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

, и это заставит md-select работать какожидается.Я все же решил включить его сюда, потому что он, похоже, связан с другими проблемами и может иметь общее происхождение.

К сожалению, я еще не выяснил, как решить другие проблемы или какой атрибут изменить "патч "проблема.Так что любая помощь или указатели высоко ценятся.

Answer 1

Похоже, что при использовании последней версии vue-material шаблон по умолчанию должен быть загружен явно.Следовательно, добавление

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

в файл main.js из vue-cli, похоже, решает эту проблему.