Clash Royale CLAN TAG#URR8PPP

Vuetify - CSS not working (taking effect) inside component

Case 1

We are trying to apply custom a style to a rendered vuetify element:

<template>
<v-text-field v-model="name" label="Name" />
</template>

<style scoped>
.input-group__input
background: red;

</style>


But there are no changes.

v-html

img

<template>
<div v-html="customHTML"></div>
</template>

<script>
export default
data: () => (
customHTML: `<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">`;
)

</script>

<style scoped>
img
width: 200px;
height: 200px;

</style>


How to apply custom CSS to those elements?

1 Answer
1

NOTE: Make sure to include styles as per docs

Also in case of broken components make sure that your app is wrapped inside v-app tag:

v-app

<v-app>
<v-content>
//..
</v-content>
</v-app>


Documentation says:

In order for your application to work properly, you must wrap it in a
v-app component.

v-app

Solution

use vue-loader's deep selectors >>> like so:

vue-loader

>>>

Case 1:

>>>.input-group__input
background: red;



Case 2:

>>>img
width: 200px;
height: 200px;



So there is no need to remove scoped attribute from <style> tag.

scoped

<style>

Note: deep-selectors were implemented in v12.2.0

v12.2.0

In both cases CSS changes are not taking effect because elements you are trying to style are not part of your component, and thus don't have data-v-xxxxxxx attribute, which is used for styling elements in the current scope (component) when using <style scoped>.

When using scoped attribute we tell the vue to apply css only to elements with data-v-xxxxxxx, but not nested elements. Thus we need to explicitly use deep-selectors.

data-v-xxxxxxx

<style scoped>

scoped

data-v-xxxxxxx

For example, in case #1 rendered <v-text-field> will look like so:

#1

<v-text-field>

// notice `data-v-61b4012e` here:
<div data-v-61b4012e class="input-group input-group--text-field primary--text">
<label>Name</label>
<div class="input-group__input"> // and notice no `data-v-61b4012e` here
<input tabindex="0" aria-label="Name" type="text">
</div>
<div class="input-group__details"></div>
</div>


And in case #2 rendered v-html looks like this:

#2

v-html

<div data-v-61b4012e> // notice `data-v-61b4012e` here
// and no `data-v-61b4012e` on image
<img src="https://vuetifyjs.com/static/doc-images/carousel/planet.jpg">
</div>


If you are trying to override some style (inline-style) and this solution did not work, you might want to see more about CSS specificity.

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.