how to use scoped css

Question

<va-input
    label="Device ID"
    type="text" 
    v-model="deviceid" 
    required />

i am using vuejs, i need to change font-size and color of above label tag . whenever i write style like below

label{
    color:red,
    font-size:20px
}

it will effect all other pages.

Does this answer your question? [How to correctly use "scoped" styles in VueJS single file components?](https://stackoverflow.com/questions/45898865/how-to-correctly-use-scoped-styles-in-vuejs-single-file-components) — Valentin Duboscq, Dec 17 '19 at 10:49

score 2 · Answer 1 · answered Dec 17 '19 at 12:27

Use scoped attribute
Use CSS module
Use BEM naming convention
Use your naming convention
Or use a libary's convention.

Of course you could mix match between naming approach with the other approach. I myself prefer combine the (1) with (4). At first I thought scope attribute is safe enough for scope style, but when working with projects, it turned out it's not, because of the mechanism it's used under the hood for the scope attribute is just automatically add some data attribute like [data-v-f3f3eg9]..

An example of my approach:

//MyComponent.vue

<template>
  <a class="MyComponent-button">The Button<a>
<template>

<style scoped> // scoped

   // use `MyComponent-` prefix for scope naming convention
  .MyComponent-button {
    color:red;
    backgroundcolor:blue;
  }
</style>

Zach Leighton · Accepted Answer · 2019-12-17T11:26:54.883

0

In the style block you can specify scoped like so:

<va-input label="Device ID"
 class="label-style"
 type="text" 
 v-model="deviceid" 
 required>
</va-input>
<!-- above is in the template -->

<style lang="css" scoped>
.label-style label {
    color:red,
    font-size:20px
}
</style>

This will make this style dependent on data tags and won't affect things globally. This can be a bit slow so you may want to look into something like BEM or CSS modules for a more performance-oriented solution.

edited Dec 17 '19 at 11:26

answered Dec 17 '19 at 10:49

Zach Leighton

1,939
14
24

Post your SFC please – Zach Leighton Dec 17 '19 at 11:02

Antonio Okoro · Answer 3 · 2019-12-17T11:30:08.200

It won't work because from what I'm seeing the label element is generated in the 'va-input' component. Scoped styles are only applied to the elements in the current component.

What you can do is either add the following tag to the va-input component

<style scoped>
     label{
        color:red,
        font-size:20px
     }
</style>

or add a specific class or id to your label in your va-component and then you can style only that label from anywhere...

Hope this helps

how to use scoped css

3 Answers3