weex-nuke/docs/theme-provider/demo/basic.md

基于 Rax 、Weex 的高性能组件体系 ~~

# ThemeProvider 主题注入、MD 注入

* order: 0
- title_en: Themes injection

主题注入、MD 注入 demo

---
```js
/** @jsx createElement */
import { View, Button, Page, ThemeProvider } from 'weex-nuke';
const { StyleProvider } = ThemeProvider;

<NukePlayGround>
  <StyleProvider style={md} androidConfigs={{ rippleEnabled: true }}>
    {/*内容代码*/}
  </StyleProvider>
</NukePlayGround>
```
---

```js

import { createElement, Component, render } from 'rax';
let orange = {
  Core: {
    [`color-brand1-1`]: '#FFF0E6',
    [`color-brand1-6`]: '#FF6A00',
    [`color-brand1-9`]: '#E35300'
  }
};
let md = {
  Core: {
    [`color-brand1-1`]: '#00BBD3',
    [`color-brand1-6`]: '#009688',
    [`color-brand1-9`]: '#0096A6'
  }
};

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  render() {
    console.log(this);
    return (
      <Page title="ThemeProvider">
        <Page.Intro main="style" />
        <StyleProvider style={orange}>
          <Button.Group block style={styles.btns}>
            <Button type="primary" style={styles.btn}>
              主操作
            </Button>
            <Button type="secondary" style={styles.btn}>
              次要操作
            </Button>
            <Button type="normal" style={styles.btn}>
              普通
            </Button>
          </Button.Group>
        </StyleProvider>

        <Page.Intro main="material design 风格" />
        <StyleProvider style={md} androidConfigs={{ rippleEnabled: true }}>
          <Button.Group block style={styles.btns}>
            <Button type="primary" rect style={styles.btn}>
              主操作
            </Button>
            <Button type="secondary" rect style={styles.btn}>
              次要操作
            </Button>
            <Button type="normal" rect style={styles.btn}>
              普通
            </Button>
          </Button.Group>
        </StyleProvider>
      </Page>
    );
  }
};
const styles = {
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '20rem'
  }
};
render(<App />);
```