mpvue——修改第三方组件样式

前言

我们都知道在vue中可以定义多个<style>,一般为了防止全局污染,我们会使用<style scoped>代表这里面的css样式只在本页面生效。

全局

这个当时测试是直接写，没有加层级，然后样式没生效，后面就直接删除，在私有的里面进行穿透修改了！如果要测试最好加本页面的大类，不然会污染全局!!!所以还是推荐私有穿透吧。

代码语言：javascript复制

<style >

</style>

私有

使用/deep/进行穿透,在mpvue中使用>>>穿透,编译会报错

代码语言：javascript复制

.form-area {
      width: 100%;
      bottom: 1.88rem;
      .form-wrap {
        width: 340px;
        position: relative;
        left: 20px;
        .form-item {
          width: 100%;
          height: 50px;
          margin: 5px 0;
          border-radius: 10px;
          background-color: #fff;
        /deep/.van-cell {
            width: 240px !important;
            position: none !important;
          }
        }
      }

编译 测试 form mpvue width

0 人点赞