Question

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

我正在使用vuejs，我需要更改上述标签tag的字体大小和颜色。每当我写下面的样式

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

它将影响所有其他页面。

Answer 1

使用scoped attribute
使用CSS module
使用BEM naming convention
使用您的命名约定
或使用库的约定。

当然，您可以在命名方法和其他方法之间混合使用匹配项。我自己更喜欢将（1）与（4）结合在一起。起初，我认为scope属性对于范围样式而言已经足够安全了，但是事实证明，事实并非如此，因为在幕后使用范围属性的机制只是自动添加一些数据属性，例如[data-v-f3f3eg9] ..

我的方法的一个示例：

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

Answer 2

在style块中，您可以像这样指定作用域：

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

这将使此样式依赖于数据标签，并且不会全局影响。这可能会有点慢，所以您可能需要研究BEM或CSS模块之类的东西，以寻求更加注重性能的解决方案。

Answer 3

它不起作用，因为从我看到的标签元素是在“ va-input”组件中生成的。范围样式仅应用于当前组件中的元素。

您可以做的是将以下标签添加到va-input组件中

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

或在va-component的标签中添加特定的类或ID，然后您可以在任何地方仅对该标签设置样式...

希望这会有所帮助

如何使用作用域的CSS

3 个答案: