CODEWITHSUNDEEP
cssvue.js
pavan kp
pavan kp

Reputation: 69

how to use scoped css

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

Upvotes: 2

Views: 1968

Answers (3)

Loi Nguyen Huynh
Loi Nguyen Huynh

Reputation: 9958

  1. Use scoped attribute
  2. Use CSS module
  3. Use BEM naming convention
  4. Use your naming convention
  5. 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>

Upvotes: 2

Antonio Okoro
Antonio Okoro

Reputation: 1

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

Upvotes: 0

Zach Leighton
Zach Leighton

Reputation: 1941

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.

Upvotes: 0

Related Questions