在 Vue-Material 中更改字体不起作用

Question

下面是我的 App.vue 文件代码，我遇到了 md-tabs 中字体更改的问题，来自 https://vuematerial.io/components/tabs 的组件。 CSS 中的行：

background: #42A5F5;

可行，但这不行

color: #E3F2FD;

App.vue:

<template>
      <div id="app">

        <md-tabs md-sync-route>
          <md-tab id="tab-home" md-label="Home" to="/"></md-tab>
          <md-tab id="tab-settings" md-label="Settings" to="/Settings"></md-tab>

        </md-tabs>

        <router-view></router-view>
      </div>
    </template>

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

    <style lang="scss" scoped>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #E3F2FD;
      }

      .md-tabs {
        background: #42A5F5;
        color: #E3F2FD;
      }

    </style>

Answer 1

组件具有独立的作用域，因此应用 css 不适用于组件。

您应该考虑在您的组件中应用 css 或定义一个全局 css 文件并包含。

Answer 2

这是CSS Specificity的问题。

参见DOM：

<div data-v-7ba5bd90 id="app">
  <div data-v-7ba5bd90 class="md-tabs md-alignment-left md-theme-default">
    <div class="md-tabs-navigation md-elevation-0">
      <button type="button" class="md-button md-theme-default md-active">
        <div class="md-ripple">
          <div class="md-button-content">Home</div>
        </div>
      </button>
      ...

您的 .md-tabs { color: #E3F2FD; } 样式正在应用于 <div data-v-7ba5bd90 class="md-tabs md-alignment-left md-theme-default">（第 2 行）。

但是 button（第 4 行）的风格更具体，因此在 <div class="md-button-content">Home</div>（第 6 行）中占主导地位。

关于 background，.md-tabs { background: #42A5F5; } 也是如此，但它似乎不会影响您，因为实际应用到 button 的颜色是 transparent，在 .md-button 中声明。所以按钮是透明的。实际上有颜色的是它的父级 div.

解决方案：

即使你做了 .md-button-content { color: #E3F2FD }，它也不会起作用，因为 Vue 实际上会声明 .md-button-content[data-v-12345] { color: #E3F2FD } 而内部的 <div class="md-button-content">Home</div> 不会得到这样的属性。

您唯一的解决方案是声明一个非 scoped <style> 标记，并将其放在那里：

<style lang="scss" scoped>
...
</style>

<style>
    .md-button-content {
       color: #E3F2FD;
    }
</style>

演示：https://codesandbox.io/s/4q8jzq9mzx?module=%2Fsrc%2FApp.vue

在 Vue-Material 中更改字体不起作用

Change of font in Vue-Material doesn't work

css

components

vue.js

vuejs2

vue-material

解决方案：