Styling Vuetify selectors

Question

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?

Answer 1

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.

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