向 Vuetify 组件添加自定义 CSS 的问题

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 在组件内不起作用（生效）

Answer 1

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

确保

.v-menu__content {
    height: 500px;
}

未嵌套在您的 SCSS 中的任何其他组件中。