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

我正在使用Vuetify选择器输入组件, v-select ,我想定制它的样式。因为组件只使用一个 v-选择 在html中没有必要的子元素,我转而通过检查chrome并在那里复制类来设置组件的样式。例如,要更改活动值的字体大小,我使用:

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

这很好,直到我意识到我的风格在这种方式下不起作用 任何 导航抽屉的部分(通常隐藏)。例如,

.v-menu__content {
    height: 500px;
}

不会以任何方式影响风格。奇怪的是,这不仅仅是我的风格被Vuetify风格覆盖了(!重要的没有影响-我的CSS似乎根本没有到达组件。经检查,我没有任何笔迹。怎么用?

我认为这是由于选择器组件的抽屉部分是基于活动的。在CSS中,有没有其他方法可以解决这些类型的元素?我希望能够提供一个Jsfiddle,但是(在我找到的模板上),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 ):

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

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

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

因此,我遇到的问题不同于这里的问题:

Vuetify - CSS not working (taking effect) inside component