Vue3 scoped样式下Unicons图标position属性不生效如何解决？

根本原因 #

你当前使用了带scoped属性的样式块，Vue的scoped样式机制会为当前组件的所有原生DOM元素添加唯一的自定义data属性，样式规则也会自动带上该属性前缀做样式隔离。而<unicon>属于第三方子组件，scoped样式默认不会作用到子组件的根DOM节点上，因此你定义的.search__icon、.clear__icon规则没有生效，图标保持默认的static定位。

可行解决方案 #

• 方案1：使用深度选择器穿透scoped限制（最推荐）
  在scss环境下使用::v-deep伪类标记需要穿透的样式即可，该写法兼容Vue2和Vue3，修改后的样式如下：

  <style lang="scss" scoped>
  .search__sort {
      margin-left: 290px;
  
      .search__bar{
          position: relative;
          display: flex;
          min-width: 100px;
  
          ::v-deep .search__icon{
              position: absolute;
              top: 6px;
              left: 8px;
              width: 14px;
          }
  
          ::v-deep .clear__icon{
              position: absolute;
              top: 8px;
              right: 8px;
              width: 10px;
              cursor: pointer;
          }
  
          .search {
              border: none;
              border-radius: 5px;
              height: 20px;
              width: 20%;
              padding: 2px 23px 2px 30px;
              outline: 0;
              background-color: #ded9d9;
          }
  
          .search:hover, .search:focus {
              border: 1.5px solid #009688;
              background-color: white;
          }
      }
  }
  </style>
  

• 方案2：拆分全局与局部样式
  在同一个Vue文件中新增一个不带scoped属性的style块，将图标相关的样式放到全局块中，原有其他样式保留在scoped块中即可：

  <!-- 全局样式块，不添加scoped -->
  <style lang="scss">
  .search__bar .search__icon{
      position: absolute;
      top: 6px;
      left: 8px;
      width: 14px;
  }
  .search__bar .clear__icon{
      position: absolute;
      top: 8px;
      right: 8px;
      width: 10px;
      cursor: pointer;
  }
  </style>
  
  <!-- 原有局部样式块保留 -->
  <style lang="scss" scoped>
  .search__sort {
      margin-left: 290px;
      .search__bar{
          position: relative;
          display: flex;
          min-width: 100px;
          .search {
              border: none;
              border-radius: 5px;
              height: 20px;
              width: 20%;
              padding: 2px 23px 2px 30px;
              outline: 0;
              background-color: #ded9d9;
          }
          .search:hover, .search:focus {
              border: 1.5px solid #009688;
              background-color: white;
          }
      }
  }
  </style>
  

• 方案3：包裹原生DOM容器
  给<unicon>组件外层包裹一个原生的div标签，将定位类名加在div上，无需穿透样式即可生效，修改后的HTML示例：

  <div class="search__bar">
      <div class="search__icon">
          <unicon name="search" fill="#7f7d7d"/>
      </div>
      <input class="search" v-model="search" placeholder="Search for a house">
      <div class="clear__icon" v-if="search != ''">
          <unicon name="times" fill="#7f7d7d" @click="resetInput()"/>
      </div>
  </div>
  

内容的提问来源于stack exchange，提问作者Michał Różga