全局化配置 ConfigProvider

可以为组件提供统一的全局化配置。

使用

全局使用

ConfigProvider 只需在应用外围包裹一次即可全局生效。

import { TiConfigProvider } from '@titian-design/mobile-react'

<TiConfigProvider theme={theme}>
  <App />
</TiConfigProvider>

反黑反白切换

import { TiConfigProvider } from '@titian-design/mobile-react'

<TiConfigProvider darkMode>
  <App />
</TiConfigProvider>

theme配置示例

修改主题颜色

const theme = { 
  token: { 
    color: { 
      foundation: { 
        brand: '#0656f3', // 主题色
        marketing: '#0656f3', // 营销色
        striking: '#0656f3' // 价格色
      } 
    } 
  } 
};

修改圆角

const theme = { 
  token: { 
    borderRadius: { 
      default: 4
    } 
  } 
};

修改间距

const theme = { 
  token: { 
    spacing: { 
      horizontal: { default: 6 }  // 盒模型内水平间距
      vertical: { default: 6 }  // 盒模型内垂直间距
      gap: { default: 6 }  // 盒模型外部间距
    },
  } 
};

修改字号

const theme = { token: { fontSize: { default: 20 } } };

修改行高

const theme = { 
  token: { 
    lineHeight: { 
      single: { m: 1.1 }, // 单行行高
      multiline: { m: 1.618 }, // 多行行高
    },
  } 
};

修改某个组件的样式，如修改Button的颜色和圆角

const theme = { 
  components: {
    button: { 
      token: {
        borderRadius: { gradient: 999, default: 0 },
        color: { foundation: { brand: '#0656f3' }}
      }
    },
  },
};