如何在Vuetify中为彩色文本设置高强调（高不透明度）效果？

问题核心：text-high-emphasis 类会直接覆盖文本颜色为主题默认的高强调色（黑/深灰），而非仅调整透明度；默认的 text-medium-emphasis 又会让彩色文本显得过淡。

解决方案：自定义透明度类 #

无需依赖Vuetify自带的强调类，直接自定义一个仅调整透明度的CSS类，既能保留绑定的文本颜色，又能实现高不透明度效果。

1. 添加自定义CSS类：

.text-full-opacity {
  opacity: 1 !important;
}

（注：!important 用于覆盖Vuetify默认text-medium-emphasis的opacity设置，若元素未继承该类可省略）

2. 修改组件代码：
   将原有的 text-high-emphasis 替换为自定义类：

<v-chip v-else-if="chip.distance===0" size="x-large" variant="outlined" 
        class="font-weight-bold text-full-opacity"
        :color="colourFromDistance(r,c)"
> 
  {{ chip.name }} 
</v-chip>

原理说明 #

Vuetify的text-medium-emphasis类本质是给文本设置了opacity: 0.6（不同主题可能略有差异），导致彩色文本变淡；而text-high-emphasis类则直接指定了color属性值，会覆盖通过:color绑定的自定义颜色。自定义的text-full-opacity类仅将透明度调整为1，完全保留原本的文本颜色，实现高强调效果。

内容的提问来源于stack exchange，提问作者quilkin