下面是我的 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
.
解决方案:
即使你做了 .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
关于css - Vue-Material 中的字体更改不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49115372/