样式覆盖

组件库基于微信小程序的机制，为开发者提供了以下 2 种修改组件样式的方法：

1. CSS 变量: 在组件父级的样式中使用 css变量 覆盖子节点设置的 css 样式；
2. 外部样式类: 组件库开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的 外部样式类 部分。外部样式类的相关知识背景请查阅 微信小程序文档

方式一：使用外部样式类

信息

需要注意的是普通样式类和外部样式类的优先级是未定义的，因此需要自行加大css权重

使用示例

自定义的高度和水平内边距。

• index.wxss
• index.wxml

code

/* 添加ti-button标签名，仅仅只为增加权重，非必须。 */
ti-button .custom-btn-class {
  height: 60rpx;
  padding: 0 20rpx
}

<!-- 使用了外部样式类ext-class -->
<ti-button ext-class="custom-btn-class">
  按钮
</ti-button>

方式二：使用 CSS 变量

Titian UI 为部分样式开放了基于 CSS 属性的定制方案。 相较于 使用外部样式类 的方式来说，当前方案支持在页面或应用级别对多个组件的样式做批量修改，以达搭配对主题样式的定制。
当然，也可以用它来修改单个组件的部分样式，具体的使用方法请查阅各个组件相对应的 css 变量部分。

使用示例

1. 通过父节点设置 css 变量修改

   • index.wxml
   • index.wxss

   code

   <view class="main">
     <ti-button>按钮</ti-button>
   </view>

   .main {
     --button-height: 60rpx;
     --button-padding-h: 20rpx;
   }

2. 通过组件自身 ext-style 属性修改

   <ti-button ext-style="--button-height: 60rpx;--button-padding-h: 20rpx;">
     按钮
   </ti-button>