样式覆盖

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

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

方式一：通过外部样式类

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

• index.tsx
• index.css

code

import './index.css';

<TiButton type="primary" extClass="my-button">按钮</TiButton>

::part(my-button) {
  height: 100px;
}

方式二：通过 css 变量

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

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

   • index.html
   • index.css

   code

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

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

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

   const extStyle = {'--button-height': '50px'}
   
   <TiButton type="primary" extStyle={extStyle}>按钮</TiButton>

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

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

修改主题变量

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

配置全局主题变量

import React from 'react';
import { TiConfigProvider, TiButton } from '@titian-design/mobile-react';

const App: React.FC = () => (
  <TiConfigProvider theme={{
    token: { color: { foundation: { brand: '#00b96b' } } }
  }}>
    <TiButton>按钮</TiButton>
  </TiConfigProvider>
);

export default App;

配置指定组件主题变量

import React from 'react';
import { TiConfigProvider, TiButton } from '@titian-design/mobile-react';

const App: React.FC = () => (
  <TiConfigProvider theme={{
    components: {
      button: { token: { color: { foundation: { brand: '#00b96b' } } } }
    }
  }}>
    <TiButton>按钮</TiButton>
  </TiConfigProvider>
);

export default App;