Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized:
.v-select__selections {
font-size: 20px;
}
Although this method worked initially, I soon discovered that my styles were not affecting any parts of the navigation drawer that are normally hidden. Even when trying to adjust the height of the menu content using:
.v-menu__content {
height: 500px;
}
No changes occurred. Despite using important declarations, it seemed like my CSS wasn't reaching those components at all. Why?
This issue might be attributed to the active-based nature of the drawer part of the selector component. Is there a specific way to target these elements in CSS? Unfortunately, I cannot provide a Jsfiddle as Vuetify renders differently from what I've encountered. The version in use is Vuetify 1.1.7.
The styles are directly included in the component's .vue file, non-scoped. Vuetify and Vuetify styles have been imported in main.js:
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
File structure (Default structure from vue init webpack -myProject):
src/
-main.js
-app.vue
-components/
-problematicComponent.vue
index.html
Additionally, attempts were made utilizing deep selectors but the issue persisted with the hidden menu components:
>>>.v-menu__content {
height: 500px;
}
Therefore, the problem faced is distinct from issues mentioned here:
Vuetify - CSS not working (taking effect) inside component