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