组件样式修正-小程序学习开发

xiefandaren

微信开发文档地址：https://developers.weixin.qq.com ... figuration/app.html

简介

学习视频教程

组件骨架

<!--pages/list/threeOrder/threeOrder.wxml-->

<slot name='sTop'></slot>
<view>
  <text class="textSlogan">具名插槽</text>
</view>

<slot name='sButton'></slot>

组件样式

/* pages/list/threeOrder/threeOrder.wxss */
.textSlogan {
  color: rgb(0, 148, 0);
  margin: 10px;
  //line-height: 50px;
}

也可以引用组件的时候修饰 样式
骨架

<view class="oderBox">
  <threeOrder>
    <text slot='sTop'>顶部笑哈哈233</text>
    <text slot='sButton' style="color: aqua;">底部笑哈哈233</text>
  </threeOrder>
  <!-- 修饰样式不能用css id 或者属性 -->
</view>

修饰

/* pages/list/index.wxss */
input {
  border: 1px grey solid;
}

.oderBox {
  margin: 10px;
  line-height: 30px;
  
  text{
    color: red;
  }
}

引用的样式 会穿透修饰到组件里面的一些东西