vue使用scoped css

基本原理

post

基本使用

在单文件中修改组件库css

scoped css只会对 文件中可见的html标签的一级标签生效 比如举例

<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
</el-form>

可见加入随机码的只有3个 可见的有3个 el-form el-form-item el-input 对这3个标签进行样式修改可直接修改 比如

.el-form {
  background: red;
  .el-form-item {
    background: green;
  }
  .el-input {
    border: 1px solid green;
  }
}

但是对于组件库延伸出来的表现需要加/deep来获取级联关系

.el-form {
  /deep/ .el-form-item__content{
    border: solid 1px red;
  }
}

/deep/的原理在于给/deep/之前的选择器增加随机码

.el-form[data-v-56bffc4f] .el-form-item__content {
    border: solid 1px red;
}

在多文件中修改子文件css

多文件意味着多个vue实例 举例子组件

<div class="hello">
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="审批人">
      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>
  </el-form>
</div>

父组件引用了子组件并且加了一个class 为test <test class="test"/> 真实页面渲染为 可见 子组件最外层加入了父组件的随机码 data-v-56bffc4f 那么

1. 只修改子组件的最外层样式

.test {
  background: #42b983;
}

是可以生效的

2. 修改子组件中的可见的标签的样式 需要加上/deep/

.test {
/deep/ .el-form-item{
    background: red;
  }
}

3. 修改子组件中不可见标签样式 加deep

.test {
  /deep/ .el-form-item__content {
    border: 2px solid greenyellow;
  }
}

也可以的