vuetify 3文本颜色在设置BG彩色后不变

发布于 2025-02-07 02:48:03 字数 502 浏览 3 评论 0 原文

我正在尝试将 bg-color 以及 text-white 设置为简单按钮，但是一旦设置了背景颜色，我就无法在没有文本颜色的情况下更改文本颜色创建一个类并将颜色定义为！重要

<v-btn flat class="bg-pink text-white">
  <v-icon color="white">mdi-email</v-icon>
  <span>Click</span>
</v-btn>

以下链接显示代码结果屏幕截图

单击检查代码结果

我在做什么错？

原文

I'm trying to set both bg-color and also text-white to a simple button, but once background color is set, there's no way I can change text color without creating a class and define the color as !important

<v-btn flat class="bg-pink text-white">
  <v-icon color="white">mdi-email</v-icon>
  <span>Click</span>
</v-btn>

The following link shows the code result screenshot

Click to check code result

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

誰ツ都不明白 2025-02-14 02:48:03

在使用Vuetify时尝试此操作

<v-btn outlined flat color="primary">
    <v-icon dense color="error">mdi-email</v-icon>
    <span class="white--text"> Click </span>
</v-btn>

，Bootstrap类将与Vuetify类冲突。因此，您最好选择与Bootstrap类不同的Vuetify类。查看Vuetify文档以获取更多信息。

Try this

<v-btn outlined flat color="primary">
    <v-icon dense color="error">mdi-email</v-icon>
    <span class="white--text"> Click </span>
</v-btn>

When using vuetify, bootstrap classes would conflict with vuetify classes. So you better choose vuetify classes which are of course different from bootstrap classes. Take a look at vuetify documentation for more.

回复收藏 0 原文

情愿 2025-02-14 02:48:03

这可以通过使用 bg- {color} 类来实现背景颜色和文本颜色的类，并使用 text- {color} class。这是完整的 documentation color pallete上。

演示：

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
}).use(vuetify).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
    <div class="text-xs-center">
        <v-btn class="bg-pink">
          <v-icon class="text-white">mdi-email</v-icon>
          <span class="text-white">Click</span>
        </v-btn>
    </div>
  </v-app>
</div>

This can be achieved by using bg-{color} class for background color and text color by using text-{color} class. Here is the full documentation on color pallete.

Demo :

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
}).use(vuetify).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
    <div class="text-xs-center">
        <v-btn class="bg-pink">
          <v-icon class="text-white">mdi-email</v-icon>
          <span class="text-white">Click</span>
        </v-btn>
    </div>
  </v-app>
</div>