当我将 vuetify.js 导入到我的 Vue 项目时，文本选择颜色变为黑色

Question

我在我的 Vue 项目中使用红色文本。如果我不导入 vuetify.js，当我选择文本时，文本颜色不会改变。但是我导入 vuetify.js，选择文本颜色从红色变为黑色。即使我导入（使用）vuetify，我怎么能不更改选择文本颜色。

当没有 vuetify css

Codepen

当导入 vuetify css

Codepen

我在我的 vue 项目中使用 HTML 编辑器（tiptap）。但是 vuetify css 改变了我项目的全局风格。这让我很尴尬。当我通过选择文本更改文本颜色时，我不知道颜色是否更改。因为选择颜色总是黑色的。

如何忽略某些组件或Divs中的一些vuetify css。

Answer 1

文本选择颜色由 sudo 类 ::selection 控制。 Vuetify 在其主 css 文件中有两个声明。

::-moz-selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: #000;
   text-shadow: none;
}
::selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: #000;
   text-shadow: none;
}

您应该设置一个自定义样式 css 或 scss，它优先于 vuetify.css 以您想要的方式覆盖这些样式。

或者，除了用其他颜色覆盖选择属性之外，您还可以简单地unset 它们。

::selection {
   background-color: #b3d4fc; /* Required when declaring ::selection */
   color: unset;
   text-shadow: none;
}