Vuetify 3设置bg-color后按钮文字颜色无法正常修改问题

核心原因是CSS选择器权重规则和Vuetify组件的样式封装逻辑：

• 你用的带flat属性的是Vuetify 1.x/2.x版本的按钮组件，组件渲染时会给内部的.v-btn__content文本容器、.v-icon图标元素写入内置的作用域样式，显式声明文本颜色，这类样式的选择器权重远高于你加在按钮根节点上的通用文本工具类。
• 你给根节点加的text-white本质是给按钮根元素设置color: white，普通原生元素下子元素会继承父级的color属性，但如果子元素被更高权重的选择器命中、显式设置了color值，父级的继承样式会直接失效，这就是加了text-white文字仍然不变色的核心原因。
• 你单独给v-icon设置color="white"没生效，也是因为flat按钮默认的文本色样式权重高于图标组件默认传入的颜色类权重。

• 没有使用组件官方提供的颜色配置API，错误套用原生元素/普通工具类的样式修改思路去改第三方组件内部样式，违背了组件的样式设计逻辑。
• 混淆了原生元素的样式继承规则和组件作用域样式的优先级逻辑，误以为加在组件根节点的文本颜色类可以自动穿透覆盖组件内部的预定义样式。
• 给自定义CSS加!important强覆盖的写法属于hack手段，会破坏组件的样式封装，后续升级框架版本、修改主题配置时很容易出现不可预期的样式冲突。

直接使用v-btn自带的属性配置即可，不需要额外写自定义CSS或者拼接工具类：

<!-- color属性设置按钮背景色，dark属性告知组件当前背景为深色，自动适配白色文字、图标 -->
<v-btn flat color="pink" dark>
  <v-icon left>mdi-email</v-icon>
  <span>Click</span>
</v-btn>

这种写法是组件原生支持的，内部会自动处理背景色、文字、图标的颜色对比度，不存在优先级冲突问题。

内容的提问来源于stack exchange，提问作者Eduardo Lourenço