样式覆盖

组件库提供两种方式修改 Shadow DOM 内部样式：

CSS 变量: 在组件父级的样式中使用 css变量覆盖子节点设置的 css 样式；
外部样式类: 通过扩展类名组合 ::part的方式修改样式，权重高于 内联样式 ，低于 !important ；

方式一：通过外部样式类

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

<template>
  <TiButton type="primary" ext-class="my-button">Button</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from '@titian-design/mobile-vue';
</script>

<style>
::part(my-button) {
  height: 100px;
}
</style>

方式二：通过 css 变量

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

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

<template>
  <div class="main">
    <TiButton type="primary">按钮</TiButton>
  </div>
</template>

<script lang="ts" setup>
import { TiButton } from '@titian-design/mobile-vue';
</script>

<style>
.main {
  --button-height: 60rpx;
  --button-padding-h: 20rpx;
}
</style>

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

<template>
  <TiButton type="primary" :ext-style="extStyle">按钮</TiButton>
</template>

<script lang="ts" setup>
import { TiButton } from '@titian-design/mobile-vue';

const extStyle = {'--button-height': '50px'}
</script>

方式三：通过 `TiConfigProvider` 修改主题样式

在 2.x 的版本中，我们影响主题的最小的元素称为 Design Tokens，通过修改 Design Tokens 的默认值、梯度值和具体值，可以呈现出丰富多样的主题样式

修改主题变量

通过在 TiConfigProvider 中传入 theme，可以配置主题。以下是配置主题的示例

配置全局主题变量

<template>
  <TiConfigProvider>
    <TiButton type="primary" :ext-style="extStyle">按钮</TiButton>
  </TiConfigProvider>
</template>

<script lang="ts" setup>
import { TiButton, TiConfigProvider } from '@titian-design/mobile-vue';

const extStyle = {
  token: {
    color: { foundation: { brand: '#00b96b' } }
  }
};
</script>

配置指定组件主题变量

<template>
  <TiConfigProvider>
    <TiButton type="primary" :ext-style="extStyle">按钮</TiButton>
  </TiConfigProvider>
</template>

<script lang="ts" setup>
import { TiButton, TiConfigProvider } from '@titian-design/mobile-vue';

const extStyle = {
  components: {
    button: {
      token: { color: { foundation: { brand: '#00b96b' } } }
    }
  }
};
</script>

方式一：通过外部样式类​

方式二：通过 css 变量​

方式三：通过 TiConfigProvider 修改主题样式​

修改主题变量​

配置全局主题变量​