element-ui 卡片头部样式在scoped下失效

Question

我想改变卡片头部的样式，发现影响到其他页面的卡片，
于是加了scoped，
可是修改的样式就失效了，请问改怎么配置

 div(slot="header")
    span 产品名称: APEX-XXX  

.el-card__header {
    background-color: #999999;
    padding: 10px 20px;
  }

Answer 1

https://vue-loader.vuejs.org/...
去看深度选择器

Answer 2

scoped之后，该组件样式就私有化了，实际上的样式会变成类似于这样的：

.el-card__header[data-v-51a1741d] {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    box-sizing: border-box;
}

所以你不管怎么改.el-card__header都是没用的，可以试试曲线救国：

<el-card class="box-card">
  <div slot="header" class="clearfix">
    <div style="margin:-18px -20px; padding:10px 20px; background: #999999;">自定义header样式</div>
  </div>
  <div v-for="o in 4" :key="o" class="text item">
    {{'列表内容 ' + o }}
  </div>
</el-card>

Answer 3

加important

Answer 4

去掉scoped 然后在该vue文件最外侧套个盒子，再更改样式