// @flow weak

import React from 'react';
// import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import Chart from 'material-charts/Chart';
import Text from 'material-ui/Text';

// const styleSheet = createStyleSheet('PaperSheet', (theme) => ({
//   root: theme.mixins.gutters({
//     paddingTop: 16,
//     paddingBottom: 16,
//   }),
// }));

export default function PaperSheet(/* props, context */) {
  // const classes = context.styleManager.render(styleSheet);

  return (
    <div>
      <Chart>
        <Text type="headline" component="h3">
          This is a sheet of paper.
        </Text>
        <Text type="body1" component="p">
          Paper can be used to build surface or other elements for your application.
        </Text>
      </Chart>
    </div>
  );
}

PaperSheet.contextTypes = {
  styleManager: customPropTypes.muiRequired,
};

// @flow weak
import React from 'react';
import customPropTypes from 'material-ui/utils/customPropTypes';
import Chart from 'material-charts/Chart';
import Text from 'material-ui/Text';

export default function DemoChart() {
  return (
    <Chart>
      <Text type="headline" component="h3">
        This is a sheet of paper.
      </Text>
      <Text type="body1" component="p">
        Paper can be used to build surface or other elements for your application.
      </Text>
    </Chart>
  );
}

DemoChart.contextTypes = {
  styleManager: customPropTypes.muiRequired,
};

clean up chart demo