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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-Material中的字体更改不起作用相关的知识,希望对你有一定的参考价值。

下面是我的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>
答案

这是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

Solution:

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

你唯一的解决方案是声明一个not-scoped <style>标签,并把它放在那里:

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

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

但是:ぁzxswい

另一答案

组件具有隔离范围,因此例如应用css将不适用于组件。

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

以上是关于Vue-Material中的字体更改不起作用的主要内容,如果未能解决你的问题,请参考以下文章

MFC:在静态控件上更改字体大小不起作用?

更改默认字体不起作用

在 vuetify 中更改默认字体不起作用(vue-cli 3)[Vuetify 1.X]

为啥“自动调整字体”不起作用?

删除边框顶部,更改字体系列,....在 Xamarin iOS 最新版本中不起作用

如果在表格单元格中,CSS悬停更改其他文本/类的样式不起作用