mui · oliviertassinari · Jul 29, 2017 · Jul 29, 2017
diff --git a/docs/src/components/AppContent.js b/docs/src/components/AppContent.js
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import MarkdownElement from 'docs/src/components/MarkdownElement';
 
-const styleSheet = createStyleSheet('AppContent', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   content: theme.mixins.gutters({
     paddingTop: 80,
     flex: '1 1 100%',

diff --git a/docs/src/components/AppDrawer.js b/docs/src/components/AppDrawer.js
@@ -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('AppDrawer', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   paper: {
     width: 250,
     backgroundColor: theme.palette.background.paper,

diff --git a/docs/src/components/AppDrawerNavItem.js b/docs/src/components/AppDrawerNavItem.js
@@ -9,7 +9,7 @@ import { ListItem } from 'material-ui/List';
 import Button from 'material-ui/Button';
 import Collapse from 'material-ui/transitions/Collapse';
 
-const styleSheet = createStyleSheet('AppDrawerNavItem', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   button: theme.mixins.gutters({
     borderRadius: 0,
     justifyContent: 'flex-start',

diff --git a/docs/src/components/AppFrame.js b/docs/src/components/AppFrame.js
@@ -51,7 +51,7 @@ const styleSheet = createStyleSheet('AppFrame', theme => ({
       width: 'auto',
     },
   },
-  appFrame: {
+  root: {
     display: 'flex',
     alignItems: 'stretch',
     minHeight: '100vh',
@@ -121,7 +121,7 @@ class AppFrame extends Component {
     }
 
     return (
-      <div className={classes.appFrame}>
+      <div className={classes.root}>
         <AppBar className={appBarClassName}>
           <Toolbar>
             <IconButton

diff --git a/docs/src/components/Demo.js b/docs/src/components/Demo.js
@@ -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('Demo', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     position: 'relative',

diff --git a/docs/src/components/Link.js b/docs/src/components/Link.js
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { Link as LinkRouter } from 'react-router';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 
-const styleSheet = createStyleSheet('Link', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     color: 'inherit',
     textDecoration: 'none',

diff --git a/docs/src/components/MarkdownDocs.js b/docs/src/components/MarkdownDocs.js
@@ -7,7 +7,7 @@ import Button from 'material-ui/Button';
 import MarkdownElement from 'docs/src/components/MarkdownElement';
 import Demo from 'docs/src/components/Demo';
 
-const styleSheet = createStyleSheet('MarkdownDocs', {
+const styleSheet = createStyleSheet({
   root: {
     marginBottom: 100,
   },

diff --git a/docs/src/components/MarkdownElement.js b/docs/src/components/MarkdownElement.js
@@ -55,7 +55,7 @@ const anchorLinkStyle = theme => ({
   },
 });
 
-const styleSheet = createStyleSheet('MarkdownElement', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     fontFamily: theme.typography.fontFamily,
     marginTop: theme.spacing.unit * 2,

diff --git a/docs/src/pages/component-demos/app-bar/ButtonAppBar.js b/docs/src/pages/component-demos/app-bar/ButtonAppBar.js
@@ -10,7 +10,7 @@ import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
 
-const styleSheet = createStyleSheet('ButtonAppBar', {
+const styleSheet = createStyleSheet({
   root: {
     marginTop: 30,
     width: '100%',

diff --git a/docs/src/pages/component-demos/app-bar/SimpleAppBar.js b/docs/src/pages/component-demos/app-bar/SimpleAppBar.js
@@ -7,7 +7,7 @@ import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import Typography from 'material-ui/Typography';
 
-const styleSheet = createStyleSheet('SimpleAppBar', {
+const styleSheet = createStyleSheet({
   root: {
     marginTop: 30,
     width: '100%',

diff --git a/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js b/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js
@@ -121,7 +121,7 @@ function getSuggestions(value) {
       });
 }
 
-const styleSheet = createStyleSheet('IntegrationAutosuggest', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   container: {
     flexGrow: 1,
     position: 'relative',

diff --git a/docs/src/pages/component-demos/avatars/IconAvatars.js b/docs/src/pages/component-demos/avatars/IconAvatars.js
@@ -10,7 +10,7 @@ import FolderIcon from 'material-ui-icons/Folder';
 import PageviewIcon from 'material-ui-icons/Pageview';
 import AssignmentIcon from 'material-ui-icons/Assignment';
 
-const styleSheet = createStyleSheet('IconAvatars', {
+const styleSheet = createStyleSheet({
   avatar: {
     margin: 10,
   },

diff --git a/docs/src/pages/component-demos/avatars/ImageAvatars.js b/docs/src/pages/component-demos/avatars/ImageAvatars.js
@@ -8,7 +8,7 @@ import Avatar from 'material-ui/Avatar';
 import remyImage from 'docs/src/assets/images/remy.jpg';
 import uxecoImage from 'docs/src/assets/images/uxceo-128.jpg';
 
-const styleSheet = createStyleSheet('ImageAvatars', {
+const styleSheet = createStyleSheet({
   row: {
     display: 'flex',
     justifyContent: 'center',

diff --git a/docs/src/pages/component-demos/avatars/LetterAvatars.js b/docs/src/pages/component-demos/avatars/LetterAvatars.js
@@ -7,7 +7,7 @@ import Avatar from 'material-ui/Avatar';
 import deepOrange from 'material-ui/colors/deepOrange';
 import deepPurple from 'material-ui/colors/deepPurple';
 
-const styleSheet = createStyleSheet('LetterAvatars', {
+const styleSheet = createStyleSheet({
   avatar: {
     margin: 10,
   },

diff --git a/docs/src/pages/component-demos/badges/SimpleBadge.js b/docs/src/pages/component-demos/badges/SimpleBadge.js
@@ -7,7 +7,7 @@ import Badge from 'material-ui/Badge';
 import MailIcon from 'material-ui-icons/Mail';
 import FolderIcon from 'material-ui-icons/Folder';
 
-const styleSheet = createStyleSheet('SimpleBadge', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   badge: {
     margin: `0 ${theme.spacing.unit * 2}px`,
   },

diff --git a/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js b/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js
@@ -9,7 +9,7 @@ import FavoriteIcon from 'material-ui-icons/Favorite';
 import LocationOnIcon from 'material-ui-icons/LocationOn';
 import FolderIcon from 'material-ui-icons/Folder';
 
-const styleSheet = createStyleSheet('LabelBottomNavigation', {
+const styleSheet = createStyleSheet({
   root: {
     width: 500,
   },

diff --git a/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js b/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js
@@ -8,7 +8,7 @@ import RestoreIcon from 'material-ui-icons/Restore';
 import FavoriteIcon from 'material-ui-icons/Favorite';
 import LocationOnIcon from 'material-ui-icons/LocationOn';
 
-const styleSheet = createStyleSheet('SimpleBottomNavigation', {
+const styleSheet = createStyleSheet({
   root: {
     width: 500,
   },

diff --git a/docs/src/pages/component-demos/buttons/FlatButtons.js b/docs/src/pages/component-demos/buttons/FlatButtons.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Button from 'material-ui/Button';
 
-const styleSheet = createStyleSheet('FlatButtons', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   button: {
     margin: theme.spacing.unit,
   },

diff --git a/docs/src/pages/component-demos/buttons/FloatingActionButtons.js b/docs/src/pages/component-demos/buttons/FloatingActionButtons.js
@@ -7,7 +7,7 @@ import Button from 'material-ui/Button';
 import AddIcon from 'material-ui-icons/Add';
 import ModeEditIcon from 'material-ui-icons/ModeEdit';
 
-const styleSheet = createStyleSheet('FloatingActionButtons', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   button: {
     margin: theme.spacing.unit,
   },

diff --git a/docs/src/pages/component-demos/buttons/IconButtons.js b/docs/src/pages/component-demos/buttons/IconButtons.js
@@ -8,7 +8,7 @@ import IconButton from 'material-ui/IconButton';
 import DeleteIcon from 'material-ui-icons/Delete';
 import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';
 
-const styleSheet = createStyleSheet('IconButtons', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   button: {
     margin: theme.spacing.unit,
   },

diff --git a/docs/src/pages/component-demos/buttons/RaisedButtons.js b/docs/src/pages/component-demos/buttons/RaisedButtons.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Button from 'material-ui/Button';
 
-const styleSheet = createStyleSheet('RaisedButtons', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   button: {
     margin: theme.spacing.unit,
   },

diff --git a/docs/src/pages/component-demos/cards/NowPlayingCard.js b/docs/src/pages/component-demos/cards/NowPlayingCard.js
@@ -11,7 +11,7 @@ import PlayArrowIcon from 'material-ui-icons/PlayArrow';
 import SkipNextIcon from 'material-ui-icons/SkipNext';
 import albumCover from 'docs/src/assets/images/live-from-space.jpg';
 
-const styleSheet = createStyleSheet('NowPlayingCard', {
+const styleSheet = createStyleSheet({
   card: {
     display: 'flex',
   },

diff --git a/docs/src/pages/component-demos/cards/RecipeReviewCard.js b/docs/src/pages/component-demos/cards/RecipeReviewCard.js
@@ -15,7 +15,7 @@ import ShareIcon from 'material-ui-icons/Share';
 import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
 import paellaImage from 'docs/src/assets/images/paella.jpg';
 
-const styleSheet = createStyleSheet('RecipeReviewCard', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   card: { maxWidth: 400 },
   expand: {
     transform: 'rotate(0deg)',

diff --git a/docs/src/pages/component-demos/cards/SimpleCard.js b/docs/src/pages/component-demos/cards/SimpleCard.js
@@ -7,7 +7,7 @@ import Card, { CardActions, CardContent } from 'material-ui/Card';
 import Button from 'material-ui/Button';
 import Typography from 'material-ui/Typography';
 
-const styleSheet = createStyleSheet('SimpleCard', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   card: {
     minWidth: 275,
   },

diff --git a/docs/src/pages/component-demos/cards/SimpleMediaCard.js b/docs/src/pages/component-demos/cards/SimpleMediaCard.js
@@ -8,7 +8,7 @@ import Button from 'material-ui/Button';
 import Typography from 'material-ui/Typography';
 import reptileImage from 'docs/src/assets/images/contemplative-reptile.jpg';
 
-const styleSheet = createStyleSheet('SimpleMediaCard', {
+const styleSheet = createStyleSheet({
   card: {
     maxWidth: 345,
   },

diff --git a/docs/src/pages/component-demos/chips/Chips.js b/docs/src/pages/component-demos/chips/Chips.js
@@ -9,7 +9,7 @@ import FaceIcon from 'material-ui-icons/Face';
 import grey from 'material-ui/colors/grey';
 import uxecoImage from 'docs/src/assets/images/uxceo-128.jpg';
 
-const styleSheet = createStyleSheet('Chips', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   chip: {
     margin: theme.spacing.unit,
   },

diff --git a/docs/src/pages/component-demos/chips/ChipsArray.js b/docs/src/pages/component-demos/chips/ChipsArray.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Chip from 'material-ui/Chip';
 
-const styleSheet = createStyleSheet('ChipsArray', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   chip: {
     margin: theme.spacing.unit / 2,
   },

diff --git a/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js b/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js
@@ -106,7 +106,7 @@ ConfirmationDialog.propTypes = {
   selectedValue: PropTypes.string,
 };
 
-const styleSheet = createStyleSheet('ConfirmationDialogDemo', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/dialogs/FullScreenDialog.js b/docs/src/pages/component-demos/dialogs/FullScreenDialog.js
@@ -14,7 +14,7 @@ import Typography from 'material-ui/Typography';
 import CloseIcon from 'material-ui-icons/Close';
 import Slide from 'material-ui/transitions/Slide';
 
-const styleSheet = createStyleSheet('FullScreenDialog', {
+const styleSheet = createStyleSheet({
   appBar: {
     position: 'relative',
   },

diff --git a/docs/src/pages/component-demos/dialogs/SimpleDialog.js b/docs/src/pages/component-demos/dialogs/SimpleDialog.js
@@ -15,7 +15,7 @@ import blue from 'material-ui/colors/blue';
 
 const emails = ['username@gmail.com', 'user02@gmail.com'];
 
-const styleSheet = createStyleSheet('SimpleDialog', () => ({
+const styleSheet = createStyleSheet(() => ({
   avatar: {
     background: blue[100],
     color: blue[600],

diff --git a/docs/src/pages/component-demos/dividers/InsetDividers.js b/docs/src/pages/component-demos/dividers/InsetDividers.js
@@ -9,7 +9,7 @@ import Divider from 'material-ui/Divider';
 import FolderIcon from 'material-ui-icons/Folder';
 import ImageIcon from 'material-ui-icons/Image';
 
-const styleSheet = createStyleSheet('InsetDividers', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: '360px',

diff --git a/docs/src/pages/component-demos/dividers/ListDividers.js b/docs/src/pages/component-demos/dividers/ListDividers.js
@@ -6,7 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 import List, { ListItem, ListItemText } from 'material-ui/List';
 import Divider from 'material-ui/Divider';
 
-const styleSheet = createStyleSheet('ListDividers', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: '360px',

diff --git a/docs/src/pages/component-demos/drawers/UndockedDrawer.js b/docs/src/pages/component-demos/drawers/UndockedDrawer.js
@@ -15,7 +15,7 @@ import MailIcon from 'material-ui-icons/Mail';
 import DeleteIcon from 'material-ui-icons/Delete';
 import ReportIcon from 'material-ui-icons/Report';
 
-const styleSheet = createStyleSheet('UndockedDrawer', {
+const styleSheet = createStyleSheet({
   list: {
     width: 250,
     flex: 'initial',

diff --git a/docs/src/pages/component-demos/lists/CheckboxList.js b/docs/src/pages/component-demos/lists/CheckboxList.js
@@ -8,7 +8,7 @@ import Checkbox from 'material-ui/Checkbox';
 import IconButton from 'material-ui/IconButton';
 import CommentIcon from 'material-ui-icons/Comment';
 
-const styleSheet = createStyleSheet('CheckboxList', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/lists/CheckboxListSecondary.js b/docs/src/pages/component-demos/lists/CheckboxListSecondary.js
@@ -8,7 +8,7 @@ import Checkbox from 'material-ui/Checkbox';
 import Avatar from 'material-ui/Avatar';
 import remyImage from 'docs/src/assets/images/remy.jpg';
 
-const styleSheet = createStyleSheet('CheckboxListSecondary', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/lists/FolderList.js b/docs/src/pages/component-demos/lists/FolderList.js
@@ -7,7 +7,7 @@ import List, { ListItem, ListItemText } from 'material-ui/List';
 import Avatar from 'material-ui/Avatar';
 import FolderIcon from 'material-ui-icons/Folder';
 
-const styleSheet = createStyleSheet('FolderList', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/lists/InsetList.js b/docs/src/pages/component-demos/lists/InsetList.js
@@ -6,7 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
 import StarIcon from 'material-ui-icons/Star';
 
-const styleSheet = createStyleSheet('InsetList', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/lists/InteractiveList.js b/docs/src/pages/component-demos/lists/InteractiveList.js
@@ -19,7 +19,7 @@ import Typography from 'material-ui/Typography';
 import FolderIcon from 'material-ui-icons/Folder';
 import DeleteIcon from 'material-ui-icons/Delete';
 
-const styleSheet = createStyleSheet('InteractiveList', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     flexGrow: 1,
     maxWidth: 752,

diff --git a/docs/src/pages/component-demos/lists/SimpleList.js b/docs/src/pages/component-demos/lists/SimpleList.js
@@ -8,7 +8,7 @@ import Divider from 'material-ui/Divider';
 import InboxIcon from 'material-ui-icons/Inbox';
 import DraftsIcon from 'material-ui-icons/Drafts';
 
-const styleSheet = createStyleSheet('SimpleList', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/lists/SwitchListSecondary.js b/docs/src/pages/component-demos/lists/SwitchListSecondary.js
@@ -14,7 +14,7 @@ import Switch from 'material-ui/Switch';
 import WifiIcon from 'material-ui-icons/Wifi';
 import BluetoothIcon from 'material-ui-icons/Bluetooth';
 
-const styleSheet = createStyleSheet('SwitchListSecondary', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/menus/SimpleListMenu.js b/docs/src/pages/component-demos/menus/SimpleListMenu.js
@@ -6,7 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 import List, { ListItem, ListItemText } from 'material-ui/List';
 import Menu, { MenuItem } from 'material-ui/Menu';
 
-const styleSheet = createStyleSheet('SimpleListMenu', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: {
     width: '100%',
     maxWidth: 360,

diff --git a/docs/src/pages/component-demos/paper/PaperSheet.js b/docs/src/pages/component-demos/paper/PaperSheet.js
@@ -6,7 +6,7 @@ import { withStyles, createStyleSheet } from 'material-ui/styles';
 import Paper from 'material-ui/Paper';
 import Typography from 'material-ui/Typography';
 
-const styleSheet = createStyleSheet('PaperSheet', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   root: theme.mixins.gutters({
     paddingTop: 16,
     paddingBottom: 16,

diff --git a/docs/src/pages/component-demos/progress/CircularDeterminate.js b/docs/src/pages/component-demos/progress/CircularDeterminate.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles, createStyleSheet } from 'material-ui/styles';
 import { CircularProgress } from 'material-ui/Progress';
 
-const styleSheet = createStyleSheet('CircularDeterminate', theme => ({
+const styleSheet = createStyleSheet(theme => ({
   progress: {
     margin: `0 ${theme.spacing.unit * 2}px`,
   },