React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/electron-css@0.10.0/dist/index.js">
</script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

<!-- Please `RUN` the example -->

Babel + JSX

const {CSS, color, DynamicCSS, MediaQuery, constants} = ElectronCSS;
const {px} = ElectronCSS.units;
const {borderStyle, cursor} = constants;

const Theme = DynamicCSS();
const Layout = DynamicCSS();

const Windows = {
	Theme: {
    mainColor: color.grey,
    mainHighlightColor: color.grey,
    mainBackgroud: '#EEE',
    mainHighlightBackground: '#E7E7E7',
    mainBorder: [color.grey, px(1), borderStyle.solid],
  },
  Layout: {
    elementPadding: px(10),
    mainBorderRadius: 0
  }
};

const MacOS = {
	Theme: {
    mainColor: '#333',
    mainHighlightColor: 'white',
    mainBackgroud: 'white',
    mainHighlightBackground: '#3355FF',
    mainBorder: ['#333', px(1), borderStyle.solid],
  },
  Layout: {
    elementPadding: px(5),
    mainBorderRadius: px(10)
  }
};

Theme.use(Windows.Theme);
Layout.use(Windows.Layout);

const buttonStyle = CSS({
	margin: px(5),
  cursor: cursor.pointer,

  color: Theme.mainColor,
  background: Theme.mainBackgroud,
  border: Theme.mainBorder,
  borderRadius: Layout.mainBorderRadius,
  padding: Layout.elementPadding,
  
  onHover: {
    color: Theme.mainHighlightColor,
    background: Theme.mainHighlightBackground,
  }
});

class MyComp extends React.Component {
		useWin() {
      Theme.use(Windows.Theme);
      Layout.use(Windows.Layout);
    }
    
    useMac() {
      Theme.use(MacOS.Theme);
      Layout.use(MacOS.Layout);
    }
    
    render() {
        return <div>
          <button onClick={() => this.useWin()}
                  className={buttonStyle}>Windows</button>
          <button onClick={() => this.useMac()} 
                  className={buttonStyle}>Mac OS</button>
        </div>;
    }
}

ReactDOM.render(
  <MyComp />,
  document.getElementById('container')
);