nuke-theme-provider/theme/index.jsx

主题换肤

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

const orange = {
  Core: {
    'color-brand1-1': '#FFF0E6',
    'color-brand1-6': '#FF6A00',
    'color-brand1-9': '#E35300',
  },
};
const md = {
  Core: {
    'color-brand1-1': '#00BBD3',
    'color-brand1-6': '#009688',
    'color-brand1-9': '#0096A6',
  },
};

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }
  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>
        </StyleProvider>
      </Page>
    );
  }
};
const styles = {
  btns: {
    margin: '30rem',
  },
  btn: {
    marginBottom: '20rem',
  },
};
render(<App />);