rat-provider

• category: Util
• chinese: 主题注入
• type: 工具

何时使用

需要全局换肤的时候，可以通过简单修改主题变量，达到换肤的目的。

API

StyleProvider

属性 | 说明 | 类型 | 默认值 -----|-----|-----|------ style | 需要替换的主题变量集合 | obj | 无

• style

  style 注入提供了主题换肤能力，使用 style 注入变量后，可以直接替换全局的颜色、大小配置。

  使用 demo:

  import { StyleProvider } from 'nuke-theme-provider';
  
  let orange = {
      Core:{
          [`color-brand1-1`]: '#FFF0E6', // [主品牌色-浅]
          [`color-brand1-6`]: '#FF6A00', // [主品牌色-常规]
          [`color-brand1-9`]: '#E35300'  // [主品牌色-深]
      },
  
  };
  <StyleProvider style={orange}>
       <Button type="primary" style={styles.btn}>主操作</Button>
  </StyleProvider>

  使用 demo:

  import { StyleProvider } from 'nuke-theme-provider';
  
  <StyleProvider>
       <Button type="primary" style={styles.btn}>主操作</Button>
  </StyleProvider>

  附常用基础变量

'color-brand1-1' :'#E4F0FD', // [主品牌色-浅]

'color-brand1-6': '#3089DC', // [主品牌色-常规]

'color-Brand1-9' :'#1170BC', // [主品牌色-深]

'color-line1-2' :'#DCDEE3', // [线条-常规]

'color-line1-3' :'#C4C6CF', // [线条-深]

'color-text1-2' :'#999999', // [文字-浅]

'color-text1-3' :'#666666', // [文字-常规]