javascript - 将自定义 CSS 添加到 Vuetify 组件时出现问题

Question

我正在使用 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 文件中，没有作用域。 Vuetify 和 vuetify 样式在 main.js 中导入:

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

Answer 1

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

确定

.v-menu__content {
    height: 500px;
}

没有嵌套在 SCSS 的任何其他组件中。