在设计小程序使用组件的时候，如果一个组件在不同的页面使用，并且样式还不同，那么两个页面就不要不同的css样式设计，比如说小程序的搜索标签以及跳转页面。
这种情况下如果在每个页面单独写样式是不能生效的（亲实验，我的不能生效），所以我的解决办法就是在组件页面把需要用到的样式都写出来，但是使用不同的选择器或者选择器名字不同，然后在每个页面传入不同的选择器名字，这样在不同页面组件的不同选择器名字就能生效了！
比如：搜索栏
组件页面
把页面铺设出来，同时定义不同的类选择器名字
<view class='{{navSearch}}{{two}}' bindtap='jumpFn'> //整个搜索栏，包括搜索图标和输入框
<icon type='search' size='15' class='{{icn}}'></icon> //图标
<input placeholder='搜索' class='{{search}}{{three}}'></input> //搜索框
</view>
然后在组件的wxss界面写样式（所有需要的样式，包括搜索跳转过后页面的样式）
组件.wxss
.navTitle{
background-color: #0DC52E;
padding: 0px 10px 8px;
/* 对搜索跳转界面的设置 */
display: flex;
justify-content: space-between;
align-items: center
}
.navSearch{
width: 100%;
height: 25px;
margin: 0px auto;
background-color: white;
border-radius: 3px;
font-size: 12px;
color: gainsboro;
display: flex;
justify-content: center;
align-items: center;
}
.search{
width: 25px;
}
/* 搜索跳转过后的view */
.two{
width: 80%;
height: 25px;
background-color: white;
border-radius: 3px;
font-size: 12px;
color: gainsboro;
display: flex;
align-items: center;
}
/* 搜索图标 */
.icn{
margin: auto 10px;
}
/* input的宽度 */
.three{
width: auto;
}
在组件的js中设置完每个数据的类型后，在需要引入组件页面的json文件中设置组件和页面的连接
主页面.json
{
"usingComponents": {
"se": "../../../components/navsearch/navsearch"
}
}
然后就可以在传入界面设置数据了。
主页面
在主页面铺设时引入组件，同时在主页面或者js中把选择器的名字进行传值（需要和组件中的相同）
主页面.wxml
<!-- 添加组件，搜索栏 -->
<se bindjump="jumpSearch" nav-title="navTitle" nav-search="navSearch" search="search" isjump="{{isjump}}"></se>
主页面的搜索框：
主页面
这个搜索点击跳转到另外一个搜索界面，而且搜索界面的样式和这个样式不同，所以此刻另外一个选择器名字就派上用场了。
点击跳转的搜索界面(引入和主页面json相同的文件，注意路径)
搜索界面.wxml
<view>
<se bindjump="jumpSearch" nav-title="navTitle" two="two" three="three" icn="icn" isjump="{{isjump}}" bindquxiao="quxiao"></se>
</view>
因为引入的样式不同，所以这个页面的搜索框样式和主页面是不同的。
搜索页面
