关于UNIAPP环境下对自带组件的样式修改

本人作为初学者，写博客只是为了巩固自己的所学记录错误 

项目场景：

项目场景：在公司提供的基本框架下使用UNIAPP开发移动端页面时，总能用到原生组件或一些框架提供的便利组件（像element等），本文只针对UNIAPP自带的组件进行解决，另外由于使用的基本框架等配置是公司技术人员提供的，可能具有一定的特殊性，因此本文的解决方案不一定有用。

---

问题描述

使用input组件出现如下问题：

 

 <view class="search">
      <view class="search-img">
        <image class="" :src="searchImg" mode="widthFix"></image>
      </view>
      <view class="search-input">
        <input type="text" placeholder="在社区搜索内容、用户" placeholder-class="placeholder-class" class="" />
      </view>
    </view>

 

使用的input组件其输入框与placeholder内容出现分离，正常情况下应该是不会分离的。同时无法通过对input组件添加样式进行修改。

---

原因分析：

暂未知晓

感觉大概率是给我的基本框架配置有问题，毕竟之前也给了我一个框架，但那个没什么问题

---

解决方案：

使用深度选择器

右键input组件，选择‘检查’，寻找input组件的样式

 

使用深度选择器对组件的样式进行更改，这里主要修改了UNIAPP input组件的样式、input组件聚焦后的样式以及未输入时placeholder的样式

::v-deep .uni-input-input {
  border: 1px solid rgba(255, 0, 0, 0) !important;
  height: 68rpx;
  width: 570rpx;
  font-size: 30rpx;
  line-height: 68rpx;
  position: absolute;
  top: 0rpx;
  background: rgba(0, 0, 0, 0) !important;
}
/deep/ .uni-input-input:focus {
  border: 1px solid rgba(255, 0, 0, 0) !important;
  outline: 0px;
}
.placeholder-class {
  // display: none;
  color: rgb(0, 0, 0);
  opacity: 0.6;
  position: relative;
  // z-index: 90;
  line-height: 68rpx;
  margin-left: 20rpx;
  font-size: 30rpx;
  // align-items: center;
}

关于深度选择器的写法请自行百度，本文使用的是预处理器是less，用了::v-deep和/deep/两种写法。

官方对深度选择器的解释

效果如下

 题外话&牢骚

第二次写记录，还是显示文章质量低的提示（给自己写的也没必要太高吧，能看懂就行）。emmmm……短是短了点，不过这也不是什么太严重的问题，对这种问题写长文应该挺折磨读者的，毕竟谁不希望就靠复制一段代码解决问题。