Question

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

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

这很好用，直到我意识到我的样式无法在（通常是隐藏的）导航抽屉的任何部分使用。例如，

.v-menu__content {
    height: 500px;
}

不会以任何方式影响样式。奇怪的是，这不仅仅是我的样式被Vuetify样式覆盖（！重要没有效果）-看来我的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内？因为有趣的是，它不是孩子。它与v-app处于同一级别（无论出于何种原因）。

确定

.v-menu__content {
    height: 500px;
}

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

Answer 2

在编写深度选择器时写类似

displayName

我尝试了范围选择器，它的工作。像

UserInfo