样式覆盖
组件库基于微信小程序的机制，为开发者提供了以下 2 种修改组件样式的方法：
CSS 变量: 在组件父级的样式中使用 css变量 覆盖子节点设置的 css 样式；外部样式类: 组件库开放了大量的外部样式类供开发者使用，具体的样式类名称可查阅对应组件的 外部样式类 部分。外部样式类的相关知识背景请查阅 微信小程序文档
方式一：使用外部样式类
信息
需要注意的是普通样式类和外部样式类的优先级是未定义的，因此需要自行加大css权重
使用示例
自定义的高度和水平内边距。
- index.wxss
- index.wxml
/* 添加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 变量部分。
使用示例
通过父节点设置 css 变量修改
- index.wxml
- index.wxss
<view class="main">
<ti-button>按钮</ti-button>
</view>.main {
--button-height: 60rpx;
--button-padding-h: 20rpx;
}通过组件自身 ext-style 属性修改
<ti-button ext-style="--button-height: 60rpx;--button-padding-h: 20rpx;">
按钮
</ti-button>
基础样式变量
// 品牌色 品牌色阶 #fa2c19
@theme-r: var(--theme-r, 250);
@theme-g: var(--theme-g, 44);
@theme-b: var(--theme-b, 25);
@brand-color: rgb(@theme-r, @theme-g, @theme-b);
@brand-color-fade-10: rgba(@theme-r, @theme-g, @theme-b, 0.1);
@brand-color-fade-20: rgba(@theme-r, @theme-g, @theme-b, 0.2);
@brand-color-fade-30: rgba(@theme-r, @theme-g, @theme-b, 0.3);
@brand-color-fade-40: rgba(@theme-r, @theme-g, @theme-b, 0.4);
@brand-color-fade-50: rgba(@theme-r, @theme-g, @theme-b, 0.5);
@brand-color-fade-60: rgba(@theme-r, @theme-g, @theme-b, 0.6);
@brand-color-fade-70: rgba(@theme-r, @theme-g, @theme-b, 0.7);
@brand-color-fade-80: rgba(@theme-r, @theme-g, @theme-b, 0.8);
@brand-color-fade-90: rgba(@theme-r, @theme-g, @theme-b, 0.9);
@brand-color-fade-100: rgba(@theme-r, @theme-g, @theme-b, 1);
// 色彩 / 中性色阶
@neutral-color-1: var(--neutral-color-1, #212121); // 用于一级重要信息，标题文字、关键功能操作入口
@neutral-color-2: var(--neutral-color-2, #757575); // 用于次级重要信息，正文文字等
@neutral-color-3: var(--neutral-color-3, #9e9e9e); // 用于次要信息、辅助功能，如提示说明文字
@neutral-color-4: var(--neutral-color-4, #c4c4c4); // 用于次要信息、辅助功能，如提示说明文字
@neutral-color-5: var(--neutral-color-5, #e0e0e0); // 用于非重要信息，为最弱一级文字
@neutral-color-6: var(--neutral-color-6, #f2f2f2); // 分割线，用于如标题栏、tab栏及列表之间
@neutral-color-7: var(--neutral-color-7, #f5f5f5); // 用于页面背景色
@neutral-color-8: var(--neutral-color-8, #fafafa); // 用于浅灰背景色
@neutral-color-9: var(--neutral-color-9, #ffffff); // 用于页面白色背景色、反色文字颜色
// 色彩 / 功能色阶
// 用于警告、出错用色 #ff2e2e
@error-r: 255;
@error-g: 46;
@error-b: 46;
@error-color: rgb(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b));
@error-color-fade-10: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.1);
@error-color-fade-20: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.2);
@error-color-fade-30: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.3);
@error-color-fade-40: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.4);
@error-color-fade-50: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.5);
@error-color-fade-60: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.6);
@error-color-fade-70: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.7);
@error-color-fade-80: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.8);
@error-color-fade-90: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 0.9);
@error-color-fade-100: rgba(var(--error-r, @error-r), var(--error-g, @error-g), var(--error-b, @error-b), 1);
// 用于成功或和微信相关的功能 #07c160
@success-r: 7;
@success-g: 193;
@success-b: 96;
@success-color: rgb(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b));
@success-color-fade-10: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.1);
@success-color-fade-20: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.2);
@success-color-fade-30: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.3);
@success-color-fade-40: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.4);
@success-color-fade-50: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.5);
@success-color-fade-60: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.6);
@success-color-fade-70: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.7);
@success-color-fade-80: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.8);
@success-color-fade-90: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 0.9);
@success-color-fade-100: rgba(var(--success-r, @success-r), var(--success-g, @success-g), var(--success-b, @success-b), 1);
// 用于文字链跳转 #2a6ae9
@link-r: 42;
@link-g: 106;
@link-b: 233;
@link-color: rgb(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b));
@link-color-fade-10: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.1);
@link-color-fade-20: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.2);
@link-color-fade-30: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.3);
@link-color-fade-40: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.4);
@link-color-fade-50: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.5);
@link-color-fade-60: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.6);
@link-color-fade-70: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.7);
@link-color-fade-80: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.8);
@link-color-fade-90: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 0.9);
@link-color-fade-100: rgba(var(--link-r, @link-r), var(--link-g, @link-g), var(--link-b, @link-b), 1);
// 用于醒目的警示 #ffa300
@warning-r: 255;
@warning-g: 163;
@warning-b: 0;
@warning-color: rgb(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b));
@warning-color-fade-10: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.1);
@warning-color-fade-20: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.2);
@warning-color-fade-30: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.3);
@warning-color-fade-40: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.4);
@warning-color-fade-50: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.5);
@warning-color-fade-60: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.6);
@warning-color-fade-70: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.7);
@warning-color-fade-80: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.8);
@warning-color-fade-90: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 0.9);
@warning-color-fade-100: rgba(var(--warning-r, @warning-r), var(--warning-g, @warning-g), var(--warning-b, @warning-b), 1);
// 行高 1.2
@line-height: 1.2;
// 字号
@T16: 16px;
@T18: 18px;
@T20: 20px;
@T22: 22px;
@T24: 24px;
@T26: 26px;
@T28: 28px;
@T30: 30px;
@T32: 32px;
@T34: 34px;
@T36: 36px;
@T38: 38px;
@T40: 40px;
@T42: 42px;
@T44: 44px;
@T46: 46px;
@T48: 48px;
@T60: 60px;
// 字重 全局字重只有两种，1、bold iso为500，安卓为700；2、normal 统一为400
@font-weight-300: 300;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;
@font-weight-bold: var(--font-weight-bold, 600);
// 间距
@gap-4: 4px;
@gap-8: 8px;
@gap-12: 12px;
@gap-16: 16px;
@gap-20: 20px;
@gap-24: 24px;
@gap-28: 28px;
@gap-32: 32px;
@gap-36: 36px;
@gap-40: 40px;
@gap-44: 44px;
@gap-48: 48px;
// 投影
@shadow-sm: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
@shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
@shadow-lg: 0 6px 20px 0 rgba(0, 0, 0, 0.2);
@shadow-xl: 0 6px 20px 0 rgba(0, 0, 0, 0.06);
// 柔和
@transition-timing-function-soft: 0.5, 1, 0.89, 1;
// 自然
@transition-timing-function-natural: 0.48, 0.33, 0.24, 0.95;
// 弹力
@transition-timing-function-stretch: 0.48, 0.33, 0.24, 1.18;
// 匀速
@transition-timing-function-linear: linear;
// 圆角规则
// 通用型（圆角）：与设计稿上圆角一致；
// 潮流型（直角）：所有涉及到圆角的内容版本圆角改为 0px;
// 可爱型（大圆角）：在设计稿上圆角基础上增加8px;(按钮button、搜索search 直接改为胶囊型)
@radius-4: calc(var(--base-radius-size, 0px) + 4px);
@radius-8: calc(var(--base-radius-size, 0px) + 8px);
@radius-12: calc(var(--base-radius-size, 0px) + 12px);
@radius-16: calc(var(--base-radius-size, 0px) + 16px);