6

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__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):

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

user7548189
  • 996
  • 6
  • 15
  • 30
  • Is your CSS scoped? – Andrew Li Aug 10 '18 at 02:51
  • No it is not. Interestingly enough, when I scoped the CSS, *none* of the styles worked. I'm quite confused right now. – user7548189 Aug 10 '18 at 03:05
  • Because the Vuetify component is out of reach for the scoped CSS. Are you sure the class/selector is correct? (BTW if `!important` doesn't work you can always override by increasing specificity) – Andrew Li Aug 10 '18 at 03:07
  • Is there any other information I could provide to narrow the issue? – user7548189 Aug 10 '18 at 22:30
  • Where did you include the css? In .vue file where the component is, or separate style file? You wrote: `it appeared that my CSS didn't reach the components at all.`, but I don't think we can know why this happens without your file structure and how you import your styles. – Traxo Aug 11 '18 at 10:26
  • Edited with file structure and vuetify setup. – user7548189 Aug 11 '18 at 13:58
  • Thanks for update. So you are using `` in `problematicComponent.vue` and it has no effect like it does [here](https://codepen.io/anon/pen/rrPvNb)? No other lang but CSS? Even when using `height: 500px !important;`? Are you sure style gets compiled? Perhaps put css somewhere where you are sure it compiles, and see if height changes. I'd encountered problems with watcher when my .vue files wouldn't get compiled after changes for some reason. Try to rebuild and see what happens I guess... AFAICS what you've done has to work. – Traxo Aug 11 '18 at 16:55
  • I'm using SCSS, would that have anything to do with it? – user7548189 Aug 12 '18 at 14:32

2 Answers2

5

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).

Make sure

.v-menu__content {
    height: 500px;
}

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

-3

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{
}
Atul
  • 420
  • 2
  • 10