better2021 / Blog

个人博客
https://feiyuweb.me/Blog
1 stars 0 forks source link

Vue 使用Scss,深度修改局部样式 #46

Open better2021 opened 3 years ago

better2021 commented 3 years ago

使用scoped后,局部样式,不会影响到全局样式 如果想在使用了scoped不污染全局样式的情况下,修改局部组件的样式,可以使用深度选择器

less中一般使用 >>> 或 /deep/ scss中一般使用 ::v-deep

.app-container {
  width: 100%;
  .line {
    text-align: center;
  }
  ::v-deep .el-input__inner:focus {
    border-color: #ecb02e;
    outline: 0;
    color: #2d353c;
    background-color: #fff;
    outline: 0;
    -webkit-box-shadow: 0 0 0 0.2rem rgb(52 143 226 / 25%);
    box-shadow: 0 0 0 0.2rem rgb(52 143 226 / 25%);
  }
}