I want to change the style of the head of the card and find that it affects the cards on other pages.
then I added scoped,
, but the modified style is invalid. How to change the configuration
.el-card__header {
background-color: -sharp999999;
padding: 10px 20px;
}scoped, the component style is privatized, and the actual style becomes something like this:
.el-card__header[data-v-51a1741d] {
padding: 18px 20px;
border-bottom: 1px solid -sharpebeef5;
box-sizing: border-box;
}so no matter how you change it. El-card__header is useless, you can try the curve to save the nation:
<el-card class="box-card">
<div slot="header" class="clearfix">
<div style="margin:-18px -20px; padding:10px 20px; background: -sharp999999;">header</div>
</div>
<div v-for="o in 4" :key="o" class="text item">
{{' ' + o }}
</div>
</el-card>add important
remove scoped and wrap a box in the outermost part of the vue file, then change the style
https://vue-loader.vuejs.org/.
to see the depth selector