vue2如何更改element-ui中的样式

前言：在实现页面百分比还原的时候，大家既想一边使用ui组件库快速开发，一边又苦恼ui库中提供的可以更改样式的属性较少，不太灵活，那么有什么解决办法呢？

1. 打开你所运行的网页，检查确定好控制那个dom元素的class类名----这一步我相信大家应该都是知道的
2. 使用::v-deep 深度选择器 直接更改即可，这样便可成功

  ::v-deep { 
  .el-collapse-item__header {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 134, 0, 0.3) 100%
    );
    height: 161px;
    padding: 0 240px;
    font-size: 40px;
    font-family: "MochiyPopOne-Regular", "MochiyPopOne";
    font-weight: 400;
    color: #ff8600;
    line-height: 161px;
    letter-spacing: 5px;
  }
}

## 更改样式时所碰到的难点

项目需求----手风琴效果 1.手风琴收缩时的样式，可使用上述办法即可 2.难点：当设置手风琴展开时的样式效果时，发现无从下手，最后经过本人的不断试错与火眼金睛发现，当手风琴展开式会给展开的那个item添加一个名为is-active的class类名，可以此为参照物去更改被选中时的样式

::v-deep{
   .is-active {
    div:nth-child(1) {
      .el-collapse-item__header {
        background-color: #ff8600;
        color: white;
      }
    }
  }
  .is-active:nth-child(1)::before {
    background: url("../assets/images/jian.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  //  去掉element中icon的旋转
  .el-collapse-item__arrow {
    transition: none !important;
  }
  .el-collapse-item__arrow.is-active {
    -webkit-transform: none;
    transform: none;
  }
  // 去掉结束
}