小程序修改自定义组件样式

需求

改变下拉框的宽度，未改变之前宽度是写死的，文字距离箭头很远

 

 

 

 

解决思路

在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时
对暴露出的class进行class覆盖。

1.找到需要修改的标签

<view class='ms-content-box'>
    <view class='ms-content' bindtap='selectToggle'>
        <view class='ms-text'>{{selectText}}</view>
         <view class="{{selectShow ? 'icon-u    p' : 'icon-down'}}"></view>
    </view>
    <view class='ms-options' wx:if="{{selectShow}}">
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='index' class='ms-option' bindtap='setText'>{{item.text || item.value || item}}</view>
    </view>
</view>

 

通过对组件的观察，我们需要覆盖的标签的class为ms-content-box

2.在组件的js文件中将这个class暴露

Component({
    externalClasses: ['ms-content-box'], 

})

3.在引用页面引用该组件时对暴露出的class进行覆盖

<view class="select">
  <!-- 下拉框组件start -->
  <single-dropdown-select prop-array='{{selectArray}}' selectText="{{selectText}}" bind:select='select' ms-content-box='new-ms-content-box'
    selectText="{{selectText}}" />
</view>

 

4.在wxss文件中添加需要修改的样式

  .new-ms-content-box {   width: auto!important; }

 

标签：box,自定义,item,content,程序修改,ms,组件,class
来源： https://www.cnblogs.com/magic-world/p/14307472.html