代码之家  ›  专栏  ›  技术社区  ›  nachocab

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

  •  5
  • nachocab  · 技术社区  · 8 年前

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

    .v-btn
      color: red !important
    

    color 道具只是背景色,据我所知。我想我可以在打电话的时候改变主次主题 Vue.use(Vuetify, { theme: {...}} ) ,但如果要覆盖单个组件呢?

    1 回复  |  直到 8 年前
        1
  •  97
  •   Traxo    8 年前

    有 css classes 对于vuetify中任意位置的文本着色,只需附加 --text 一种颜色。
    比如说

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

    它应该和你的主题中定义的颜色一起工作。 primary--text
    请注意,这并不是特定于 v-btn ,类应该在任何地方工作。

        2
  •  3
  •   Hiws    5 年前

    如果您正在使用 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" 道具或任何你喜欢的东西。