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

Posted 2023-02-16

【中文标题】如何更改 Vuetify 按钮的文本颜色？

【英文标题】：How to change the text color of a Vuetify button?

【发布时间】：2019-02-14 22:33:40

【问题描述】：

也许我遗漏了一些明显的东西，但我无法找出更改 v-btn 中文本颜色的正确方法。这可行，但必须使用 !important 似乎并不理想：

.v-btn
  color: red !important

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

【参考方案1】：

在 vuetify 的任何地方都有 css classes 用于为文本着色，只需将 --text 附加到颜色即可。 比如

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

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

【讨论】：

啊，明白了。如果我想使用像“#1976D2”这样的随机颜色呢？我需要先将其设为主要/次要或类似的东西吗？

@nachocab 是的，我相信这是迄今为止正确的方法。但是，您可能不想使用“随机”颜色，而是尽可能尝试使用框架已经提供给您的颜色：github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/…

对。这就说得通了。我只是想知道如何更改另一个属性，例如 font-family 或类似的东西。我不认为他们对每个可能的值都有特定的类

你在surprise :) 不是字体系列，但肯定有很多选择。

@dotNET 可以，比如加text--darken-4

【参考方案2】：

如果您使用的是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" prop 或任何您喜欢的方式轻松访问。

【讨论】：

这是处理常见主题内容的最佳方式

【参考方案3】：

您可以更改按钮中现有跨度中输入的文本的颜色。这样：

v-btn 
border-radius: 8px !important;
border-color: red !important;
color: red  !important;
background-color: red !important;
text-decoration: none !important;
max-width: auto;
font-size-adjust: auto;
margin: 1px;
&:hover 
    background-color: blue !important;
    color: blue !important;
    text-decoration-color: blue !important;
    border-color: blue !important;
    margin: 1px;
    span 
        color: white !important;