nuke-theme-provider/docs/advance.md

主题换肤

# ThemeProvider

* order: 0

提取 wrapinstance 到外层

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Button from 'nuke-button';
import Page from 'nuke-page';
import Dialog from 'nuke-dialog';
import Text from 'nuke-text';
import { StyleProvider } from 'nuke-theme-provider';

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();
  }
  componentDidMount() {
    this.refs.modal1.show();
  }
  render() {
    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>
          <Dialog ref="modal1" duration={1000}>
            <Text>dialog</Text>
          </Dialog>
        </StyleProvider>
      </Page>
    );
  }
};
const styles = {
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '20rem'
  }
};
render(<App />);
```