Element-ui card header style is invalid under scoped

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;
  }

Css javascript element-ui vue.js

Mar.01,2021

After

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

Previous: How can I find a job at the front end?

Next: JS event polling and object references