如何更改Vuetify按钮的文本颜色?

时间:2018-09-10 13:16:10

标签: vuetify.js

也许我遗漏了一些明显的东西,但是我想不出改变v-btn中文本颜色的正确方法。这行得通,但是必须使用!important似乎并不理想:

.v-btn
  color: red !important

据我所知,color道具仅用于背景颜色。而且我猜想我可以在调用Vue.use(Vuetify, { theme: {...}} )时更改主主题/次主题,但是如果我想覆盖单个组件怎么办?

2 个答案:

答案 0 :(得分:20)

css classes可以在vuetify中的任何地方为文本着色,只需将--text附加到颜色上即可。
例如

<v-btn class="red--text">

它也应该使用您主题中定义的颜色,例如primary--text及类似内容。
请注意,这并非特定于v-btn,类应该在任何地方都可以使用。

答案 1 :(得分:1)

如果您使用的是vuetify,您可能希望将其用作标准颜色:

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
    
Vue.use(Vuetify);
    
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#14C6FF",
        secondary: "#424242",
        accent: "#82B1FF",
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF"
      }
    }
  }
});

,并且可以使用color="lightpink"道具或任何您喜欢的东西轻松访问。