一、全局和局部样式

在 app.wxss 文件中定义的样式为全局样式
在 组件样式 文件中定义的样式为局部样式

二、外部样式导入

在样式文件中通过 @import 样式文件路径 方式引入外部文件

@import "../../static/wxss/index.wxss";

三、动态设置样式

1. 在 wxml 组件文件中

<view class="container">
  <!-- 通过 style 属性设置动态样式 -->
  <view class="pad" style="color: {{color}};background: {{bgColor}};">
    未支付
  </view>
  <!-- 通过 class 名称设置动态样式 -->
  <view class="pad {{ classing }}">
    已支付
  </view>
</view>

2. 在 wxss 文件中

.pad {
  padding: 20rpx 0;
}
.class1 {
  color: green;
  background: rgb(224, 253, 224);
}

3. 在 js 文件中

Page({
  data: {
    color: "red",
    bgColor: "#ccc",
    classing: "class1",
  }
})