CODEWITHSUNDEEP
cssvue.jsvuejs2componentsvue-material
Beorn
Beorn

Reputation: 437

Change of font in Vue-Material doesn't work

Below is my App.vue file code and I faced the problem with change of the font in md-tabs, component from https://vuematerial.io/components/tabs. The line in CSS: 

background: #42A5F5;

works, but this don't

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>

Upvotes: 3

Views: 2569

Answers (2)

acdcjunior
acdcjunior

Reputation: 135822

This is a problem of CSS Specificity.

See the 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>
      ...

Your .md-tabs { color: #E3F2FD; } style is being applied to <div data-v-7ba5bd90 class="md-tabs md-alignment-left md-theme-default"> (line 2).

But the style of button (line 4) is more specific, and thus is prevailing in the <div class="md-button-content">Home</div> (line 6).

Regarding the background, the same happens to .md-tabs { background: #42A5F5; }, but it doesn't seem to affect you because the color that actually gets applied to the button is transparent, declared in .md-button. So the button is transparent. What actually is colored is its parent div.

Solution:

Even if you do a .md-button-content { color: #E3F2FD }, it won't work, because Vue will actually declare .md-button-content[data-v-12345] { color: #E3F2FD } and that inner <div class="md-button-content">Home</div> don't get such attribute.

Your only solution is declaring a not-scoped <style> tag, and place this there:

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

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

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

Upvotes: 3

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85583

Components have isolated scope, thus applying css for instance won't work for the components.

You should consider applying css inside your component or define a global css file and include.

Upvotes: 0

Related Questions