form elements appear transparent when combining vue material and the vue cli webpack template

Question

I have a problem when using md-buttons, md-select or md-field in a vue project created by the vue CLI from the webpack template.

I have a MWE of the situation here, featuring the three introduction examples from the vue material website on each type of form item combined with the vue-cli template. It doesn't look very nice, but if you run it it breaks down as follows:

1. The first row are a set of radio buttons; however, the buttons are invisible (yet you can click on them, get a ripple effect and the correct value is recorded by vue)
2. Next is a select box; however, the background of the box is transparent.
3. Finally there are a few text boxes; however, the outlines seem to be transparent.

I can solve the issue with the select boxes by inserting a style block

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

and that will make md-select work as expected. I still decided to include it here, because it seems related to the other issues and may have a common origin.

Unfortunately, I have not figured out how to solve the other issues yet or which attribute to modify to "patch" the problem. So any help or pointers are highly appreciated.

Answer 1

It appears that when using he latest version of vue-material, the default template has to be loaded explicitly. Hence adding

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

to the main.js file from vue-cli seems to fix this issue.