向 Vuetify 组件添加自定义 CSS 时出现问题答案

【问题标题】：Problems adding custom CSS to Vuetify component向 Vuetify 组件添加自定义 CSS 时出现问题
【发布时间】：2019-01-17 13:52:01
【问题描述】：

我正在使用 Vuetify 选择器输入组件 v-select，我想自定义样式。由于该组件仅使用一个 v-select 呈现，并且在 html 中没有必要的子级，因此我转向通过在 chrome 中检查并在那里复制类来设置组件的样式。例如，要更改活动值的字体大小，我使用了：

.v-select__selections {
    font-size: 20px;
}

这工作得很好，直到我意识到我的这种方式的样式不适用于（通常是隐藏的）导航抽屉的任何部分。例如，

.v-menu__content {
    height: 500px;
}

不会以任何方式影响样式。奇怪的是，这不仅仅是我的样式被 Vuetify 样式覆盖（！important 没有效果）——看起来我的 CSS 根本没有到达组件。经检查，我的写作风格没有任何痕迹。怎么样？

我相信这是由于选择器组件的抽屉部分基于活动的性质。我应该用另一种方法来处理 CSS 中的这些元素吗？我希望我可以提供一个 Jsfiddle，但是（在我找到的模板上），Vuetify 的呈现方式完全不同。我正在使用 Vuetify 1.1.7。

我的样式直接包含在组件 .vue 文件中，没有作用域。在 main.js 中导入 Vuetify 和 vuetify 样式：

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

文件结构（来自vue init webpack -myProject的默认结构）：

src/
    -main.js 
    -app.vue 
    -components/
        -problematicComponent.vue
index.html

编辑：我也尝试过使用深度选择器，但问题仍然存在于隐藏的菜单组件中：

>>>.v-menu__content {
    height: 500px;
}

因此我遇到的问题与这里的问题不同：

Vuetify - CSS not working (taking effect) inside component

【问题讨论】：

你的 CSS 有作用域吗？
不，不是。有趣的是，当我确定 CSS 的范围时，没有样式起作用。我现在很困惑。
因为 Vuetify 组件对于作用域 CSS 来说是遥不可及的。你确定类/选择器是正确的吗？（顺便说一句，如果 !important 不起作用，您可以随时通过增加特异性来覆盖）
我可以提供任何其他信息来缩小问题范围吗？
你在哪里包含了css？在组件所在的 .vue 文件中，还是单独的样式文件中？您写道：it appeared that my CSS didn't reach the components at all.，但如果没有您的文件结构以及您如何导入样式，我认为我们无法知道为什么会发生这种情况。

【解决方案1】：

我曾经在使用 SCSS 的 vuetify 选择器组件上遇到过类似的问题。您是否将.v-menu__content 嵌套在.v-select 中？因为，有趣的是，它不是一个孩子。它与v-app 处于同一级别（无论出于何种原因）。

确定

.v-menu__content {
    height: 500px;
}

不会嵌套在 SCSS 中的任何其他组件中。

【讨论】：

【解决方案2】：

在写深度选择器的时候写喜欢

.any_parent_class(can be any identifier) >>>> target_class{

}

我尝试使用范围选择器，它有效。喜欢

.flex >>>> .v-menu__content{
}

【讨论】：