[core] Remove createStyleSheet

docs/src/components/AppContent.js

@@ -3,10 +3,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import MarkdownElement from 'docs/src/components/MarkdownElement';
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   content: theme.mixins.gutters({
     paddingTop: 80,
     flex: '1 1 100%',
@@ -18,7 +18,7 @@ const styleSheet = createStyleSheet(theme => ({
       maxWidth: 900,
     },
   },
-}));
+});
 
 function AppContent(props) {
   const { className, classes, children: childrenProp, route } = props;
@@ -48,4 +48,4 @@ AppContent.propTypes = {
   route: PropTypes.object.isRequired,
 };
 
-export default withStyles(styleSheet)(AppContent);
+export default withStyles(styles)(AppContent);

docs/src/components/AppDrawer.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import List from 'material-ui/List';
 import Toolbar from 'material-ui/Toolbar';
 import Drawer from 'material-ui/Drawer';
@@ -11,7 +11,7 @@ import Divider from 'material-ui/Divider';
 import AppDrawerNavItem from 'docs/src/components/AppDrawerNavItem';
 import Link from 'docs/src/components/Link';
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   paper: {
     width: 250,
     backgroundColor: theme.palette.background.paper,
@@ -30,7 +30,7 @@ const styleSheet = createStyleSheet(theme => ({
   anchor: {
     color: theme.palette.text.secondary,
   },
-}));
+});
 
 function renderNavItems(props, navRoot) {
   let navItems = null;
@@ -124,4 +124,4 @@ AppDrawer.propTypes = {
   routes: PropTypes.array.isRequired,
 };
 
-export default withStyles(styleSheet)(AppDrawer);
+export default withStyles(styles)(AppDrawer);

docs/src/components/AppDrawerNavItem.js

@@ -4,12 +4,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import classNames from 'classnames';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import { ListItem } from 'material-ui/List';
 import Button from 'material-ui/Button';
 import Collapse from 'material-ui/transitions/Collapse';
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   button: theme.mixins.gutters({
     borderRadius: 0,
     justifyContent: 'flex-start',
@@ -42,7 +42,7 @@ const styleSheet = createStyleSheet(theme => ({
   activeButton: {
     color: theme.palette.text.primary,
   },
-}));
+});
 
 class AppDrawerNavItem extends Component {
   static defaultProps = {
@@ -111,4 +111,4 @@ AppDrawerNavItem.propTypes = {
   to: PropTypes.string,
 };
 
-export default withStyles(styleSheet)(AppDrawerNavItem);
+export default withStyles(styles)(AppDrawerNavItem);

docs/src/components/AppFrame.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import compose from 'recompose/compose';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import Typography from 'material-ui/Typography';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
@@ -28,7 +28,7 @@ function getTitle(routes) {
   return null;
 }
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   '@global': {
     html: {
       boxSizing: 'border-box',
@@ -77,7 +77,7 @@ const styleSheet = createStyleSheet(theme => ({
       display: 'none',
     },
   },
-}));
+});
 
 class AppFrame extends Component {
   state = {
@@ -175,7 +175,7 @@ AppFrame.propTypes = {
 };
 
 export default compose(
-  withStyles(styleSheet, {
+  withStyles(styles, {
     name: 'AppFrame',
   }),
   withWidth(),

docs/src/components/AppSearch.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import withWidth, { isWidthUp } from 'material-ui/utils/withWidth';
 import Search from 'material-ui-icons/Search';
 import { fade } from 'material-ui/styles/colorManipulator';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 
 let docsearchDisplay = false;
 let searchTimer;
@@ -37,7 +37,7 @@ function removeDocsearch() {
   clearInterval(searchTimer);
 }
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   '@global': {
     '.algolia-autocomplete': {
       fontFamily: theme.typography.fontFamily,
@@ -101,7 +101,7 @@ const styleSheet = createStyleSheet(theme => ({
       outline: 0,
     },
   },
-}));
+});
 
 function AppSearch(props) {
   const { classes, width } = props;
@@ -128,4 +128,4 @@ AppSearch.propTypes = {
   width: PropTypes.string.isRequired,
 };
 
-export default compose(pure, withStyles(styleSheet, { name: 'AppSearch' }), withWidth())(AppSearch);
+export default compose(pure, withStyles(styles, { name: 'AppSearch' }), withWidth())(AppSearch);

docs/src/components/Demo.js

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import IconButton from 'material-ui/IconButton';
 import Collapse from 'material-ui/transitions/Collapse';
 import CodeIcon from 'material-ui-icons/Code';
@@ -11,7 +11,7 @@ import MarkdownElement from 'docs/src/components/MarkdownElement';
 const requireDemos = require.context('docs/src', true, /\.js$/);
 const requireDemoSource = require.context('!raw-loader!docs/src', true, /\.js$/);
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     position: 'relative',
@@ -55,7 +55,7 @@ const styleSheet = createStyleSheet(theme => ({
       marginRight: 0,
     },
   },
-}));
+});
 
 class Demo extends Component {
   state = {
@@ -95,4 +95,4 @@ Demo.propTypes = {
   demo: PropTypes.string.isRequired,
 };
 
-export default withStyles(styleSheet)(Demo);
+export default withStyles(styles)(Demo);

docs/src/components/Link.js

@@ -4,9 +4,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Link as LinkRouter } from 'react-router';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   root: {
     color: 'inherit',
     textDecoration: 'none',
@@ -20,7 +20,7 @@ const styleSheet = createStyleSheet(theme => ({
   accent: {
     color: theme.palette.accent.A400,
   },
-}));
+});
 
 function Link(props) {
   const { component: ComponentProp, classes, className, variant, to, ...other } = props;
@@ -59,4 +59,4 @@ Link.propTypes = {
   variant: PropTypes.oneOf(['primary', 'accent']),
 };
 
-export default withStyles(styleSheet)(Link);
+export default withStyles(styles)(Link);

docs/src/components/MarkdownDocs.js

@@ -2,12 +2,12 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import Button from 'material-ui/Button';
 import MarkdownElement from 'docs/src/components/MarkdownElement';
 import Demo from 'docs/src/components/Demo';
 
-const styleSheet = createStyleSheet({
+const styles = {
   root: {
     marginBottom: 100,
   },
@@ -16,7 +16,7 @@ const styleSheet = createStyleSheet({
     flexDirection: 'column',
     alignItems: 'flex-end',
   },
-});
+};
 
 const headerRegexp = /---\n(.*)\n---/;
 const demoRegexp = /^demo='(.*)'$/;
@@ -72,4 +72,4 @@ MarkdownDocs.propTypes = {
   }).isRequired,
 };
 
-export default withStyles(styleSheet)(MarkdownDocs);
+export default withStyles(styles)(MarkdownDocs);

docs/src/components/MarkdownElement.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import marked from 'marked';
 import prism from 'docs/src/utils/prism';
 
@@ -55,7 +55,7 @@ const anchorLinkStyle = theme => ({
   },
 });
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     marginTop: theme.spacing.unit * 2,
@@ -177,7 +177,7 @@ const styleSheet = createStyleSheet(theme => ({
       },
     },
   },
-}));
+});
 
 function MarkdownElement(props) {
   const { classes, className, text, ...other } = props;
@@ -199,4 +199,4 @@ MarkdownElement.propTypes = {
   text: PropTypes.string.isRequired,
 };
 
-export default withStyles(styleSheet)(MarkdownElement);
+export default withStyles(styles)(MarkdownElement);

docs/src/pages/Home.js

@@ -2,13 +2,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import Link from 'react-router/lib/Link';
 import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import muiLogo from 'docs/src/assets/images/material-ui-logo.svg';
 
-const styleSheet = createStyleSheet(theme => ({
+const styles = theme => ({
   root: {
     flex: '1 0 100%',
   },
@@ -44,7 +44,7 @@ const styleSheet = createStyleSheet(theme => ({
     height: '40vw',
     maxHeight: 230,
   },
-}));
+});
 
 function Home(props) {
   const classes = props.classes;
@@ -80,4 +80,4 @@ Home.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styleSheet)(Home);
+export default withStyles(styles)(Home);

docs/src/pages/component-demos/app-bar/ButtonAppBar.js

@@ -2,23 +2,23 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
 
-const styleSheet = createStyleSheet({
+const styles = {
   root: {
     marginTop: 30,
     width: '100%',
   },
   flex: {
     flex: 1,
   },
-});
+};
 
 function ButtonAppBar(props) {
   const classes = props.classes;
@@ -43,4 +43,4 @@ ButtonAppBar.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styleSheet)(ButtonAppBar);
+export default withStyles(styles)(ButtonAppBar);

docs/src/pages/component-demos/app-bar/SimpleAppBar.js

@@ -2,17 +2,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
 
-const styleSheet = createStyleSheet({
+const styles = {
   root: {
     marginTop: 30,
     width: '100%',
   },
-});
+};
 
 function SimpleAppBar(props) {
   const classes = props.classes;
@@ -33,4 +33,4 @@ SimpleAppBar.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styleSheet)(SimpleAppBar);
+export default withStyles(styles)(SimpleAppBar);