Vue样式deep和穿透>>>修改样式

<style lang="scss" scoped>
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

//去掉type=number 带上下箭头的问题
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
//历史
input:-webkit-autofill {
color: #ffffff!important;
-webkit-text-fill-color: rgba(0,0,0,0);
box-shadow: 0 0 0 1000px red inset;
}
::v-deep .el-input__inner {
      background-color:#00132c!important;
      border:none;
      color: #fff;
    }
</style>

2、关于deep和>>>穿透使用说明

1-1:在scss/sass/less中使用/deep/样式穿透

　　#parent /deep/ .swiper-pagination-bullet{
      background-color: 'red';
　　}


1-2:在stulys中使用：>>>实现样式穿透

　　#parent >>> .swiper-pagination-bullet-active {
     border-radius: 'unset';
　　}

Vue样式deep和穿透>>>修改样式

推荐阅读