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

我正在使用Vuetify选择器输入组件，

v-select

，我想定制它的样式。由于该组件仅使用一个

v-select

进行渲染，并且html中没有必要的子元素，因此我转而通过在chrome中检查并复制该类来设置组件的样式。例如，要更改活动值的字体大小，我使用：

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

这很好，直到我意识到我的风格在（通常隐藏的）导航抽屉的任何部分都不起作用。比如说,

.v-menu__content {
    height: 500px;
}

不会以任何方式影响样式。奇怪的是，不仅仅是我的样式被Vuetify样式覆盖了（！important没有效果）-我的CSS似乎根本没有到达组件。检查时没有我的任何书写风格的痕迹。怎么做

我相信这是由于选择器组件抽屉部分的活动特性造成的。有没有其他方法可以在CSS中处理这些类型的元素？我希望我能提供一个JSFIDLE，但是（在我找到的模板上），Vuetify的呈现方式完全不同。我正在使用Vuetify 1.1.7

我的样式直接包含在component.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中的默认结构）：

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

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

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

---

在写深选择器时，像这样写

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

}

我用作用域选择器试过了，成功了。 像

---

我曾经在使用SCS的vuetify选择器组件上遇到过类似的问题。您是否将

.v-menu\u内容
嵌套在
.v-select
中？因为，有趣的是，它不是一个孩子。它与
v-app
处于同一级别（无论出于何种原因）

确定

.v-menu__content {
    height: 500px;
}

不嵌套在SCS中的任何其他组件中
 你的CSS有范围吗？没有。有趣的是，当我确定CSS的范围时，所有样式都不起作用。我现在很困惑，因为Vuetify组件对于范围受限的CSS来说是遥不可及的。您确定类/选择器正确吗？（顺便说一句，如果
！important
不起作用，您可以通过增加特定性来覆盖）我是否可以提供任何其他信息来缩小问题？您在哪里包含css？在组件所在的.vue文件中，还是单独的样式文件？您写道：
我的CSS似乎根本没有到达组件。
，但我认为我们不知道为什么没有您的文件结构会发生这种情况，以及您如何导入样式。OP明确指出使用深度选择器没有帮助。这太奇怪了！我发誓这是我最不可能想到的问题。非常感谢。
.flex >>>> .v-menu__content{
}

.v-menu__content {
    height: 500px;
}