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

    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 2

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