Clash Royale CLAN TAG#URR8PPP

Problems adding custom CSS to Vuetify component

I'm working with the Vuetify selector input component, v-select, and I want to custom style it. Since the component renders with only one v-select and no necessary children in the html, I turned to styling the component via inspecting in chrome and copying down the class there. For example, to change the font size of the active value, I used:

v-select

v-select

.v-select__selections
font-size: 20px;



This worked fine, until I realized my styles in this manner did not work on any parts of the (normally hidden) navigation drawer. For example,

.v-menu__content
height: 500px;



Would not impact the styles in any way. Bizarrely enough, it was not simply my styles getting overwritten by Vuetify styles (!important had no effect) - it appeared that my CSS didn't reach the components at all. There was no trace of any of my written styles upon inspect. How?

I believe this is due to the active-based nature of the drawer-part of the selector component. Is there another way I should be addressing those kinds of elements in CSS? I wish I could provide a Jsfiddle, but (on the templates I've found), Vuetify renders completely differently. I'm using Vuetify 1.1.7.

My styles are included directly in the component .vue file, non scoped. Vuetify and vuetify styles are 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):

vue init webpack -myProject

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


Edit: I also tried using deep selectors, but the problem still remained with the hidden menu components:

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



Therefore the problem I have is different than the problem here:

Vuetify - CSS not working (taking effect) inside component

!important

it appeared that my CSS didn't reach the components at all.

2 Answers
2

I once had a similar problem with the vuetify selector component using SCSS. Are you addressing .v-menu__content as nested inside .v-select? Because, interestingly enough, it isn't a child. It is at the same level as v-app (For whatever reason).

.v-menu__content

.v-select

v-app

Make sure

.v-menu__content
height: 500px;



isn't nested inside any other components in your SCSS.

while writing deep selector write like

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




i tried it with scoped selector , it worked.
like

.flex >>>> .v-menu__content



By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.