9

The Vuetify component for a selector is:

<v-select
:items="items"
label="Standard"
></v-select>

But when the selector is active, many nested components appear (on inspect), for example, the dropdown menu itself, menu__content. How would I go about styling it? For the "visible" Vuetify component v-select, I can manually add a class, and style it in css directly. However, I can't do this for the hidden components.

I've tried to style with the inspect-given class, ".menu__content", but it appears it doesn't work: https://jsfiddle.net/agreyfield91/tgpfhn8m/936/.

How would I style these components manually in css? Is there something fundamental about vuetify I'm missing?

user7548189
  • 996
  • 6
  • 15
  • 30
  • `
    ` defines `style="top:xx"`, probably you'd like to use `margin-top: 100px;` like [this fiddle](https://jsfiddle.net/5xpy6sfn/) or uses `vm.$el` to change the value for `style.top`
     – Sphinx Aug 07 '18 at 00:43
  • It still doesn't do anything though, no? I can't get any styles to make a difference with .menu__content in css. – user7548189 Aug 07 '18 at 00:46
  • I came across a weird interaction - in the jsFiddle, changing .menu__content to div.menu__content in css makes the styles work as per your fiddle. But it still doesn't change anything for my full app. Does this have to do with SCSS? – user7548189 Aug 07 '18 at 00:52
  • Related: https://stackoverflow.com/questions/50985783/vuetify-css-not-working-taking-effect-inside-component – Traxo Aug 07 '18 at 13:20
  • Did you solve this? I noticed you posted another (apparently very similar) question. Is there a reason you do not provide a feedback? – Traxo Aug 10 '18 at 06:17
  • 1
    Sorry, I forgot to follow up! The solution you gave worked for the jsfiddle I gave, but I realized I was working with a completely different problem on my local machine due to the vuetify setups, so your solution didn't apply (it was my fault for the question). I'll mark yours accepted for other users. – user7548189 Aug 10 '18 at 22:19

2 Answers2

4

it appears it doesn't work

If you inspect it again, you will see that it does "work", however it appears to be overridden by something:
.menu__content {
     top: 200px;
}

Is there something fundamental about vuetify I'm missing?

Apparently not in this case, you are only missing CSS Specificity.

If you inspect the element you will notice that it has some inline-style presumably added by some JavaScript that you can't change at hand.
From link above:

Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.

Solution(s)

Afaik the only way to override inline-style in external-stylesheet is by using !important, however it seems to not be the best practice: 

.menu__content {
    top: 200px !important;
}

So perhaps another things you could do are:

  • see if there is a variable in vuetify config with regards to your css property somewhere which you can change (this would probably apply to all components of the same type tho)
  • see if there is a component property in vuetify API which you can use to achieve style change (this would probably be the best solution if available)
  • change inline-style property manually with your own script
  • change style for another property which would yield the same desired outcome

Note:
If you go with the CSS solution, and style appears not to be applied, see more about deep selectors.

Traxo
  • 18,464
  • 4
  • 75
  • 87
2
<v-select
   :items="items"
   label="Standard"
   :menu-props="{ contentClass: 'youramazingclass'}">
</v-select>

From v-select docs (menu-props):

Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"

From v-menu docs (content-class)

Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targettable by classes passed directly on the component.

Juan R
  • 193
  • 2
  • 8