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

Question

我想改变卡片头部的样式，发现影响到其他页面的卡片，

于是加了scoped，

可是修改的样式就失效了，请问改怎么配置

 div(slot="header")

    span 产品名称: APEX-XXX  

.el-card__header {

    background-color: #999999;

    padding: 10px 20px;

  }

Answer 1

scoped之后，该组件样式就私有化了，实际上的样式会变成类似于这样的：.el-card__header[data-v-51a1741d] {&nbsp; &nbsp; padding: 18px 20px;&nbsp; &nbsp; border-bottom: 1px solid #ebeef5;&nbsp; &nbsp; box-sizing: border-box;}所以你不管怎么改.el-card__header都是没用的，可以试试曲线救国：<el-card class="box-card">&nbsp; <div slot="header" class="clearfix">&nbsp; &nbsp; <div style="margin:-18px -20px; padding:10px 20px; background: #999999;">自定义header样式</div>&nbsp; </div>&nbsp; <div v-for="o in 4" :key="o" class="text item">&nbsp; &nbsp; {{'列表内容 ' + o }}&nbsp; </div></el-card>

Answer 2

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