使用vuematerial在Vue中为按钮着色

Question

我无法使按钮变色。

请参见以下屏幕截图，其中显示了预期结果和实际结果：

我不知道我错过了什么，这是我第一次使用vuematerial。这是我的源代码：

 <template>
      <div>
        <div>
          <small>Flat</small>
          <md-button>Default</md-button>
          <md-button :md-ripple="false">Ripple Off</md-button>
          <md-button class="md-primary">Primary</md-button>
          <md-button class="md-accent">Accent</md-button>
          <md-button disabled>Disabled</md-button>
        </div>

        <div>
          <small>Raised</small>
          <md-button class="md-raised">Default</md-button>
          <md-button class="md-raised" :md-ripple="false">Ripple Off</md-button>
          <md-button class="md-raised md-primary">Primary</md-button>
          <md-button class="md-raised md-accent">Accent</md-button>
          <md-button class="md-raised" disabled>Disabled</md-button>
        </div>

        <div>
          <small>Dense</small>
          <md-button class="md-dense md-primary">Flat</md-button>
          <md-button class="md-dense md-raised md-primary">Raised</md-button>
        </div>
      </div>
    </template>

    <style scoped>
      small {
        display: block;
      }
    </style>

    <script>
      export default {
        name: 'RegularButtons'
      }
    </script>

Answer 1

通过快速浏览他们的文档，您似乎发现图书馆缺少一个主题，在该主题中设置了md-primary之类的东西。

在您要导入基础库的任何位置下方，即

import 'vue-material/dist/vue-material.min.css'

您还需要添加主题导入，

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

此应该解决按钮没有任何颜色的情况。