From ff9d72e430f6ab2f6503ae92f97ab1ed51f5c7fa Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 12 Aug 2017 09:37:02 +0200 Subject: [PATCH] [core] Remove createStyleSheet --- docs/src/components/AppContent.js | 8 +- docs/src/components/AppDrawer.js | 8 +- docs/src/components/AppDrawerNavItem.js | 8 +- docs/src/components/AppFrame.js | 8 +- docs/src/components/AppSearch.js | 8 +- docs/src/components/Demo.js | 8 +- docs/src/components/Link.js | 8 +- docs/src/components/MarkdownDocs.js | 8 +- docs/src/components/MarkdownElement.js | 8 +- docs/src/pages/Home.js | 8 +- .../component-demos/app-bar/ButtonAppBar.js | 8 +- .../component-demos/app-bar/SimpleAppBar.js | 8 +- .../autocomplete/IntegrationAutosuggest.js | 8 +- .../component-demos/avatars/IconAvatars.js | 8 +- .../component-demos/avatars/ImageAvatars.js | 8 +- .../component-demos/avatars/LetterAvatars.js | 8 +- .../component-demos/badges/SimpleBadge.js | 8 +- .../LabelBottomNavigation.js | 8 +- .../SimpleBottomNavigation.js | 8 +- .../component-demos/buttons/ButtonBases.js | 8 +- .../component-demos/buttons/FlatButtons.js | 8 +- .../buttons/FloatingActionButtons.js | 8 +- .../component-demos/buttons/IconButtons.js | 8 +- .../component-demos/buttons/RaisedButtons.js | 8 +- .../component-demos/cards/MediaControlCard.js | 8 +- .../component-demos/cards/RecipeReviewCard.js | 8 +- .../pages/component-demos/cards/SimpleCard.js | 8 +- .../component-demos/cards/SimpleMediaCard.js | 8 +- docs/src/pages/component-demos/chips/Chips.js | 8 +- .../pages/component-demos/chips/ChipsArray.js | 8 +- .../dialogs/ConfirmationDialog.js | 8 +- .../dialogs/FullScreenDialog.js | 8 +- .../component-demos/dialogs/SimpleDialog.js | 9 +- .../component-demos/dividers/InsetDividers.js | 8 +- .../component-demos/dividers/ListDividers.js | 8 +- .../component-demos/drawers/UndockedDrawer.js | 8 +- .../grid-list/AdvancedGridList.js | 8 +- .../grid-list/ImageGridList.js | 8 +- .../grid-list/SingleLineGridList.js | 8 +- .../grid-list/TitlebarGridList.js | 8 +- .../component-demos/lists/CheckboxList.js | 8 +- .../lists/CheckboxListSecondary.js | 8 +- .../pages/component-demos/lists/FolderList.js | 8 +- .../pages/component-demos/lists/InsetList.js | 8 +- .../component-demos/lists/InteractiveList.js | 8 +- .../pages/component-demos/lists/SimpleList.js | 8 +- .../lists/SwitchListSecondary.js | 8 +- .../component-demos/menus/SimpleListMenu.js | 8 +- .../pages/component-demos/paper/PaperSheet.js | 8 +- .../progress/CircularDeterminate.js | 8 +- .../component-demos/progress/CircularFab.js | 8 +- .../progress/CircularIndeterminate.js | 8 +- .../component-demos/progress/LinearBuffer.js | 8 +- .../progress/LinearDeterminate.js | 8 +- .../progress/LinearIndeterminate.js | 8 +- .../component-demos/progress/LinearQuery.js | 8 +- .../selection-controls/Checkboxes.js | 8 +- .../selection-controls/RadioButtonsGroup.js | 8 +- .../selection-controls/Switches.js | 8 +- .../snackbars/LongTextSnackbar.js | 8 +- .../snackbars/SimpleSnackbar.js | 8 +- .../stepper/DotsMobileStepper.js | 8 +- .../stepper/ProgressMobileStepper.js | 8 +- .../stepper/TextMobileStepper.js | 8 +- .../component-demos/tables/BasicTable.js | 8 +- .../component-demos/tables/EnhancedTable.js | 14 +- .../pages/component-demos/tabs/BasicTabs.js | 8 +- .../tabs/BasicTabsWrappedLabel.js | 8 +- .../component-demos/tabs/CenteredTabs.js | 8 +- .../component-demos/tabs/FullWidthTabs.js | 8 +- .../tabs/ScrollableTabsButtonAuto.js | 8 +- .../tabs/ScrollableTabsButtonForce.js | 8 +- .../tabs/ScrollableTabsButtonPrevent.js | 8 +- .../text-fields/ComposedTextField.js | 8 +- .../component-demos/text-fields/Inputs.js | 8 +- .../text-fields/TextFieldMargins.js | 8 +- .../component-demos/text-fields/TextFields.js | 8 +- .../pages/customization/BusinessVariables.js | 8 +- docs/src/pages/customization/CssInJs.js | 10 +- docs/src/pages/customization/DarkTheme.js | 2 +- docs/src/pages/customization/JssRegistry.js | 2 +- docs/src/pages/customization/Nested.js | 8 +- .../customization/OverridesClassNames.js | 10 +- .../pages/customization/OverridesClasses.js | 10 +- .../pages/customization/OverridesComponent.js | 2 +- .../customization/OverridesInlineStyle.js | 2 +- .../src/pages/customization/OverridesTheme.js | 2 +- docs/src/pages/customization/Palette.js | 2 +- docs/src/pages/customization/ThemeDefault.js | 2 +- .../pages/customization/TypographyTheme.js | 2 +- docs/src/pages/customization/WithTheme.js | 2 +- docs/src/pages/customization/css-in-js.md | 86 +++++------- docs/src/pages/guides/Composition.js | 2 +- docs/src/pages/layout/css-in-js/MediaQuery.js | 10 +- docs/src/pages/layout/grid/AutoGrid.js | 10 +- docs/src/pages/layout/grid/CenteredGrid.js | 10 +- docs/src/pages/layout/grid/FullWidthGrid.js | 10 +- docs/src/pages/layout/grid/InteractiveGrid.js | 10 +- docs/src/pages/layout/grid/SpacingGrid.js | 10 +- .../src/pages/layout/hidden/BreakpointDown.js | 11 +- .../src/pages/layout/hidden/BreakpointOnly.js | 11 +- docs/src/pages/layout/hidden/BreakpointUp.js | 11 +- .../pages/layout/hidden/GridIntegration.js | 11 +- docs/src/pages/style/Color.js | 10 +- docs/src/pages/style/Icons.js | 10 +- docs/src/pages/style/SvgIcons.js | 10 +- docs/src/pages/style/SvgMaterialIcons.js | 10 +- docs/src/pages/style/Typography.js | 2 +- docs/src/pages/style/TypographyTheme.js | 10 +- .../src/components/withRoot.js | 8 +- .../src/styles/createContext.js | 2 +- examples/nextjs/components/withRoot.js | 8 +- examples/nextjs/styles/context.js | 2 +- src/AppBar/AppBar.js | 7 +- src/Avatar/Avatar.js | 7 +- src/Badge/Badge.js | 7 +- src/BottomNavigation/BottomNavigation.js | 7 +- .../BottomNavigationButton.js | 9 +- src/Button/Button.js | 7 +- src/ButtonBase/ButtonBase.js | 7 +- src/ButtonBase/TouchRipple.js | 7 +- src/Card/CardActions.js | 7 +- src/Card/CardContent.js | 7 +- src/Card/CardHeader.js | 7 +- src/Card/CardMedia.js | 7 +- src/Checkbox/Checkbox.js | 7 +- src/Chip/Chip.js | 7 +- src/Dialog/Dialog.js | 7 +- src/Dialog/DialogActions.js | 7 +- src/Dialog/DialogContent.js | 7 +- src/Dialog/DialogContentText.js | 7 +- src/Dialog/DialogTitle.js | 7 +- src/Divider/Divider.js | 7 +- src/Drawer/Drawer.js | 7 +- src/Form/FormControl.js | 7 +- src/Form/FormControlLabel.js | 7 +- src/Form/FormGroup.js | 7 +- src/Form/FormHelperText.js | 7 +- src/Form/FormLabel.js | 9 +- src/Grid/Grid.js | 127 +++++++++--------- src/GridList/GridList.js | 7 +- src/GridList/GridListTile.js | 7 +- src/GridList/GridListTileBar.js | 7 +- src/Icon/Icon.js | 7 +- src/IconButton/IconButton.js | 7 +- src/Input/Input.js | 7 +- src/Input/InputLabel.js | 7 +- src/Input/Textarea.js | 7 +- src/List/List.js | 7 +- src/List/ListItem.js | 7 +- src/List/ListItemAvatar.js | 7 +- src/List/ListItemIcon.js | 7 +- src/List/ListItemSecondaryAction.js | 9 +- src/List/ListItemText.js | 9 +- src/List/ListSubheader.js | 7 +- src/Menu/Menu.js | 7 +- src/Menu/MenuItem.js | 7 +- src/MobileStepper/MobileStepper.js | 7 +- src/Paper/Paper.js | 7 +- src/Progress/CircularProgress.js | 7 +- src/Progress/LinearProgress.js | 19 ++- src/Radio/Radio.js | 7 +- src/Radio/RadioGroup.js | 7 +- src/Snackbar/Snackbar.js | 7 +- src/Snackbar/SnackbarContent.js | 7 +- src/SvgIcon/SvgIcon.js | 7 +- src/Switch/Switch.js | 7 +- src/Table/Table.js | 7 +- src/Table/TableBody.js | 7 +- src/Table/TableCell.js | 7 +- src/Table/TableHead.js | 7 +- src/Table/TableRow.js | 7 +- src/Table/TableSortLabel.js | 7 +- src/Tabs/Tab.js | 7 +- src/Tabs/TabIndicator.js | 7 +- src/Tabs/TabScrollButton.js | 7 +- src/Tabs/Tabs.js | 7 +- src/Toolbar/Toolbar.js | 7 +- src/Typography/Typography.js | 7 +- src/internal/Backdrop.js | 7 +- src/internal/Modal.js | 7 +- src/internal/Popover.js | 7 +- src/internal/SwitchBase.js | 7 +- src/styles/createStyleSheet.js | 36 ----- src/styles/getStylesCreator.js | 36 +++++ ...Sheet.spec.js => getStylesCreator.spec.js} | 10 +- src/styles/index.js | 1 - src/styles/withStyles.js | 51 ++++--- src/styles/withStyles.spec.js | 25 ++-- src/transitions/Collapse.js | 7 +- test/regressions/TestViewer.js | 46 +++---- test/regressions/tests/Grid/AutoGrid.js | 8 +- test/regressions/tests/Grid/SimpleGrid.js | 8 +- test/regressions/tests/Grid/StressGrid.js | 8 +- test/regressions/tests/Input/InputLabels.js | 8 +- test/regressions/tests/Input/Inputs.js | 8 +- test/regressions/tests/Tabs/AdvancedTabs.js | 8 +- test/regressions/tests/Tabs/SimpleTabs.js | 8 +- 198 files changed, 882 insertions(+), 967 deletions(-) delete mode 100644 src/styles/createStyleSheet.js create mode 100644 src/styles/getStylesCreator.js rename src/styles/{createStyleSheet.spec.js => getStylesCreator.spec.js} (81%) diff --git a/docs/src/components/AppContent.js b/docs/src/components/AppContent.js index 3febf7965cc3dc..da52e636269f89 100644 --- a/docs/src/components/AppContent.js +++ b/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); diff --git a/docs/src/components/AppDrawer.js b/docs/src/components/AppDrawer.js index db8476e52d0301..aa55ab5ee303be 100644 --- a/docs/src/components/AppDrawer.js +++ b/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); diff --git a/docs/src/components/AppDrawerNavItem.js b/docs/src/components/AppDrawerNavItem.js index fa51b78b657fbd..23453ebaf37429 100644 --- a/docs/src/components/AppDrawerNavItem.js +++ b/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); diff --git a/docs/src/components/AppFrame.js b/docs/src/components/AppFrame.js index c78fc0edca4552..cfee2b23c586ef 100644 --- a/docs/src/components/AppFrame.js +++ b/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(), diff --git a/docs/src/components/AppSearch.js b/docs/src/components/AppSearch.js index 231fb8de3bdedb..c258343a1457d9 100644 --- a/docs/src/components/AppSearch.js +++ b/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); diff --git a/docs/src/components/Demo.js b/docs/src/components/Demo.js index 8600eaf9d3464a..13d3b3ed458d23 100644 --- a/docs/src/components/Demo.js +++ b/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); diff --git a/docs/src/components/Link.js b/docs/src/components/Link.js index 16802a69279b69..0b6bf5ee6945cd 100644 --- a/docs/src/components/Link.js +++ b/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); diff --git a/docs/src/components/MarkdownDocs.js b/docs/src/components/MarkdownDocs.js index 15f68901a0072c..6e8d4a6a11d321 100644 --- a/docs/src/components/MarkdownDocs.js +++ b/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); diff --git a/docs/src/components/MarkdownElement.js b/docs/src/components/MarkdownElement.js index 35946f29518f9b..d0b31e071297ae 100644 --- a/docs/src/components/MarkdownElement.js +++ b/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); diff --git a/docs/src/pages/Home.js b/docs/src/pages/Home.js index 9de2fa5ecb052a..3fe3714d7b9d88 100644 --- a/docs/src/pages/Home.js +++ b/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); diff --git a/docs/src/pages/component-demos/app-bar/ButtonAppBar.js b/docs/src/pages/component-demos/app-bar/ButtonAppBar.js index 5332a1c77f7584..2d5839bdeb662c 100644 --- a/docs/src/pages/component-demos/app-bar/ButtonAppBar.js +++ b/docs/src/pages/component-demos/app-bar/ButtonAppBar.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 AppBar from 'material-ui/AppBar'; import Toolbar from 'material-ui/Toolbar'; import Typography from 'material-ui/Typography'; @@ -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({ +const styles = { root: { marginTop: 30, width: '100%', @@ -18,7 +18,7 @@ const styleSheet = createStyleSheet({ 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); diff --git a/docs/src/pages/component-demos/app-bar/SimpleAppBar.js b/docs/src/pages/component-demos/app-bar/SimpleAppBar.js index 49bf5b77e26914..738846e345d4d9 100644 --- a/docs/src/pages/component-demos/app-bar/SimpleAppBar.js +++ b/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); diff --git a/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js b/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js index da4be832b7dd79..7aba109dd24b86 100644 --- a/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js +++ b/docs/src/pages/component-demos/autocomplete/IntegrationAutosuggest.js @@ -9,7 +9,7 @@ import Paper from 'material-ui/Paper'; import { MenuItem } from 'material-ui/Menu'; import match from 'autosuggest-highlight/match'; import parse from 'autosuggest-highlight/parse'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; const suggestions = [ { label: 'Afghanistan' }, @@ -121,7 +121,7 @@ function getSuggestions(value) { }); } -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { flexGrow: 1, position: 'relative', @@ -145,7 +145,7 @@ const styleSheet = createStyleSheet(theme => ({ textField: { width: '100%', }, -})); +}); class IntegrationAutosuggest extends Component { state = { @@ -205,4 +205,4 @@ IntegrationAutosuggest.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(IntegrationAutosuggest); +export default withStyles(styles)(IntegrationAutosuggest); diff --git a/docs/src/pages/component-demos/avatars/IconAvatars.js b/docs/src/pages/component-demos/avatars/IconAvatars.js index ba6dcf4f30c8c8..3bc5f0d1590077 100644 --- a/docs/src/pages/component-demos/avatars/IconAvatars.js +++ b/docs/src/pages/component-demos/avatars/IconAvatars.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 pink from 'material-ui/colors/pink'; import green from 'material-ui/colors/green'; import Avatar from 'material-ui/Avatar'; @@ -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({ +const styles = { avatar: { margin: 10, }, @@ -28,7 +28,7 @@ const styleSheet = createStyleSheet({ display: 'flex', justifyContent: 'center', }, -}); +}; function IconAvatars(props) { const classes = props.classes; @@ -51,4 +51,4 @@ IconAvatars.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(IconAvatars); +export default withStyles(styles)(IconAvatars); diff --git a/docs/src/pages/component-demos/avatars/ImageAvatars.js b/docs/src/pages/component-demos/avatars/ImageAvatars.js index 12aff44958bb20..4567a9c6e90ad1 100644 --- a/docs/src/pages/component-demos/avatars/ImageAvatars.js +++ b/docs/src/pages/component-demos/avatars/ImageAvatars.js @@ -3,12 +3,12 @@ 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 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({ +const styles = { row: { display: 'flex', justifyContent: 'center', @@ -20,7 +20,7 @@ const styleSheet = createStyleSheet({ width: 60, height: 60, }, -}); +}; function ImageAvatars(props) { const classes = props.classes; @@ -40,4 +40,4 @@ ImageAvatars.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ImageAvatars); +export default withStyles(styles)(ImageAvatars); diff --git a/docs/src/pages/component-demos/avatars/LetterAvatars.js b/docs/src/pages/component-demos/avatars/LetterAvatars.js index a5a3ef494bbd23..c8932d0674fc66 100644 --- a/docs/src/pages/component-demos/avatars/LetterAvatars.js +++ b/docs/src/pages/component-demos/avatars/LetterAvatars.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 Avatar from 'material-ui/Avatar'; import deepOrange from 'material-ui/colors/deepOrange'; import deepPurple from 'material-ui/colors/deepPurple'; -const styleSheet = createStyleSheet({ +const styles = { avatar: { margin: 10, }, @@ -25,7 +25,7 @@ const styleSheet = createStyleSheet({ display: 'flex', justifyContent: 'center', }, -}); +}; function LetterAvatars(props) { const classes = props.classes; @@ -42,4 +42,4 @@ LetterAvatars.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LetterAvatars); +export default withStyles(styles)(LetterAvatars); diff --git a/docs/src/pages/component-demos/badges/SimpleBadge.js b/docs/src/pages/component-demos/badges/SimpleBadge.js index 4350917115d863..eefe654d26f9a3 100644 --- a/docs/src/pages/component-demos/badges/SimpleBadge.js +++ b/docs/src/pages/component-demos/badges/SimpleBadge.js @@ -2,16 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Badge from 'material-ui/Badge'; import MailIcon from 'material-ui-icons/Mail'; import FolderIcon from 'material-ui-icons/Folder'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ badge: { margin: `0 ${theme.spacing.unit * 2}px`, }, -})); +}); function SimpleBadge(props) { const classes = props.classes; @@ -31,4 +31,4 @@ SimpleBadge.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleBadge); +export default withStyles(styles)(SimpleBadge); diff --git a/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js b/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js index d6001777226480..c6da0ad66770b1 100644 --- a/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js +++ b/docs/src/pages/component-demos/bottom-navigation/LabelBottomNavigation.js @@ -2,18 +2,18 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation'; import RestoreIcon from 'material-ui-icons/Restore'; import FavoriteIcon from 'material-ui-icons/Favorite'; import LocationOnIcon from 'material-ui-icons/LocationOn'; import FolderIcon from 'material-ui-icons/Folder'; -const styleSheet = createStyleSheet({ +const styles = { root: { width: 500, }, -}); +}; class LabelBottomNavigation extends Component { state = { @@ -45,4 +45,4 @@ LabelBottomNavigation.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LabelBottomNavigation); +export default withStyles(styles)(LabelBottomNavigation); diff --git a/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js b/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js index 16c38ce01beeda..bc6b283ec96b03 100644 --- a/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js +++ b/docs/src/pages/component-demos/bottom-navigation/SimpleBottomNavigation.js @@ -2,17 +2,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation'; import RestoreIcon from 'material-ui-icons/Restore'; import FavoriteIcon from 'material-ui-icons/Favorite'; import LocationOnIcon from 'material-ui-icons/LocationOn'; -const styleSheet = createStyleSheet({ +const styles = { root: { width: 500, }, -}); +}; class SimpleBottomNavigation extends Component { state = { @@ -43,4 +43,4 @@ SimpleBottomNavigation.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleBottomNavigation); +export default withStyles(styles)(SimpleBottomNavigation); diff --git a/docs/src/pages/component-demos/buttons/ButtonBases.js b/docs/src/pages/component-demos/buttons/ButtonBases.js index 4fbcef2c032568..a02ab3e6bc12c0 100644 --- a/docs/src/pages/component-demos/buttons/ButtonBases.js +++ b/docs/src/pages/component-demos/buttons/ButtonBases.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import ButtonBase from 'material-ui/ButtonBase'; import Typography from 'material-ui/Typography'; import breakfastImage from 'docs/src/assets/images/grid-list/breakfast.jpg'; import burgersImage from 'docs/src/assets/images/grid-list/burgers.jpg'; import cameraImage from 'docs/src/assets/images/grid-list/camera.jpg'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { marginTop: theme.spacing.unit * 4, display: 'flex', @@ -80,7 +80,7 @@ const styleSheet = createStyleSheet(theme => ({ left: 'calc(50% - 9px)', transition: theme.transitions.create('opacity'), }, -})); +}); const images = [ { @@ -142,4 +142,4 @@ ButtonBases.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ButtonBases); +export default withStyles(styles)(ButtonBases); diff --git a/docs/src/pages/component-demos/buttons/FlatButtons.js b/docs/src/pages/component-demos/buttons/FlatButtons.js index 51aa3b01189321..8cb06d7f2ee4ac 100644 --- a/docs/src/pages/component-demos/buttons/FlatButtons.js +++ b/docs/src/pages/component-demos/buttons/FlatButtons.js @@ -2,15 +2,15 @@ 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 Link from 'react-router/lib/Link'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ button: { margin: theme.spacing.unit, }, -})); +}); function FlatButtons(props) { const classes = props.classes; @@ -46,4 +46,4 @@ FlatButtons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FlatButtons); +export default withStyles(styles)(FlatButtons); diff --git a/docs/src/pages/component-demos/buttons/FloatingActionButtons.js b/docs/src/pages/component-demos/buttons/FloatingActionButtons.js index 9a84b3b315c6b9..3554c1e4850be3 100644 --- a/docs/src/pages/component-demos/buttons/FloatingActionButtons.js +++ b/docs/src/pages/component-demos/buttons/FloatingActionButtons.js @@ -2,16 +2,16 @@ 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 AddIcon from 'material-ui-icons/Add'; import ModeEditIcon from 'material-ui-icons/ModeEdit'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ button: { margin: theme.spacing.unit, }, -})); +}); function FloatingActionButtons(props) { const classes = props.classes; @@ -31,4 +31,4 @@ FloatingActionButtons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FloatingActionButtons); +export default withStyles(styles)(FloatingActionButtons); diff --git a/docs/src/pages/component-demos/buttons/IconButtons.js b/docs/src/pages/component-demos/buttons/IconButtons.js index 793e7779a70da0..47be030f6abdeb 100644 --- a/docs/src/pages/component-demos/buttons/IconButtons.js +++ b/docs/src/pages/component-demos/buttons/IconButtons.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 Icon from 'material-ui/Icon'; import IconButton from 'material-ui/IconButton'; import DeleteIcon from 'material-ui-icons/Delete'; import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ button: { margin: theme.spacing.unit, }, -})); +}); function IconButtons(props) { const classes = props.classes; @@ -41,4 +41,4 @@ IconButtons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(IconButtons); +export default withStyles(styles)(IconButtons); diff --git a/docs/src/pages/component-demos/buttons/RaisedButtons.js b/docs/src/pages/component-demos/buttons/RaisedButtons.js index 33b866f503314e..a6cbf5ad33d5ec 100644 --- a/docs/src/pages/component-demos/buttons/RaisedButtons.js +++ b/docs/src/pages/component-demos/buttons/RaisedButtons.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 Button from 'material-ui/Button'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ button: { margin: theme.spacing.unit, }, input: { display: 'none', }, -})); +}); function RaisedButtons(props) { const classes = props.classes; @@ -50,4 +50,4 @@ RaisedButtons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(RaisedButtons); +export default withStyles(styles)(RaisedButtons); diff --git a/docs/src/pages/component-demos/cards/MediaControlCard.js b/docs/src/pages/component-demos/cards/MediaControlCard.js index cad12f97c231dc..8c9607aba3b11c 100644 --- a/docs/src/pages/component-demos/cards/MediaControlCard.js +++ b/docs/src/pages/component-demos/cards/MediaControlCard.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 Card, { CardContent, CardMedia } from 'material-ui/Card'; import IconButton from 'material-ui/IconButton'; import Typography from 'material-ui/Typography'; @@ -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/cards/live-from-space.jpg'; -const styleSheet = createStyleSheet({ +const styles = { card: { display: 'flex', }, @@ -36,7 +36,7 @@ const styleSheet = createStyleSheet({ height: 38, width: 38, }, -}); +}; function MediaControlCard(props) { const classes = props.classes; @@ -77,4 +77,4 @@ MediaControlCard.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(MediaControlCard); +export default withStyles(styles)(MediaControlCard); diff --git a/docs/src/pages/component-demos/cards/RecipeReviewCard.js b/docs/src/pages/component-demos/cards/RecipeReviewCard.js index 22426e37e388db..0743ed25afa26e 100644 --- a/docs/src/pages/component-demos/cards/RecipeReviewCard.js +++ b/docs/src/pages/component-demos/cards/RecipeReviewCard.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 classnames from 'classnames'; import Card, { CardHeader, CardMedia, CardContent, CardActions } from 'material-ui/Card'; import Collapse from 'material-ui/transitions/Collapse'; @@ -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/cards/paella.jpg'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ card: { maxWidth: 400, }, @@ -37,7 +37,7 @@ const styleSheet = createStyleSheet(theme => ({ flexGrow: { flex: '1 1 auto', }, -})); +}); class RecipeReviewCard extends Component { state = { expanded: false }; @@ -126,4 +126,4 @@ RecipeReviewCard.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(RecipeReviewCard); +export default withStyles(styles)(RecipeReviewCard); diff --git a/docs/src/pages/component-demos/cards/SimpleCard.js b/docs/src/pages/component-demos/cards/SimpleCard.js index 03956225291c9a..85945c80337c1e 100644 --- a/docs/src/pages/component-demos/cards/SimpleCard.js +++ b/docs/src/pages/component-demos/cards/SimpleCard.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 Card, { CardActions, CardContent } from 'material-ui/Card'; import Button from 'material-ui/Button'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ card: { minWidth: 275, }, @@ -25,7 +25,7 @@ const styleSheet = createStyleSheet(theme => ({ marginBottom: 12, color: theme.palette.text.secondary, }, -})); +}); function SimpleCard(props) { const classes = props.classes; @@ -61,4 +61,4 @@ SimpleCard.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleCard); +export default withStyles(styles)(SimpleCard); diff --git a/docs/src/pages/component-demos/cards/SimpleMediaCard.js b/docs/src/pages/component-demos/cards/SimpleMediaCard.js index 0c7e1d5792c965..640922ed6ea48b 100644 --- a/docs/src/pages/component-demos/cards/SimpleMediaCard.js +++ b/docs/src/pages/component-demos/cards/SimpleMediaCard.js @@ -2,20 +2,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Card, { CardActions, CardContent, CardMedia } from 'material-ui/Card'; import Button from 'material-ui/Button'; import Typography from 'material-ui/Typography'; import reptileImage from 'docs/src/assets/images/cards/contemplative-reptile.jpg'; -const styleSheet = createStyleSheet({ +const styles = { card: { maxWidth: 345, }, media: { height: 200, }, -}); +}; function SimpleMediaCard(props) { const classes = props.classes; @@ -49,4 +49,4 @@ SimpleMediaCard.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleMediaCard); +export default withStyles(styles)(SimpleMediaCard); diff --git a/docs/src/pages/component-demos/chips/Chips.js b/docs/src/pages/component-demos/chips/Chips.js index 9f718dd0a86311..a52b477a142ed6 100644 --- a/docs/src/pages/component-demos/chips/Chips.js +++ b/docs/src/pages/component-demos/chips/Chips.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Avatar from 'material-ui/Avatar'; import Chip from 'material-ui/Chip'; 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(theme => ({ +const styles = theme => ({ chip: { margin: theme.spacing.unit, }, @@ -21,7 +21,7 @@ const styleSheet = createStyleSheet(theme => ({ justifyContent: 'center', flexWrap: 'wrap', }, -})); +}); function handleRequestDelete() { alert('You clicked the delete icon.'); // eslint-disable-line no-alert @@ -67,4 +67,4 @@ Chips.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Chips); +export default withStyles(styles)(Chips); diff --git a/docs/src/pages/component-demos/chips/ChipsArray.js b/docs/src/pages/component-demos/chips/ChipsArray.js index 60c62a641d30f8..59132850cda86e 100644 --- a/docs/src/pages/component-demos/chips/ChipsArray.js +++ b/docs/src/pages/component-demos/chips/ChipsArray.js @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Chip from 'material-ui/Chip'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ chip: { margin: theme.spacing.unit / 2, }, @@ -14,7 +14,7 @@ const styleSheet = createStyleSheet(theme => ({ justifyContent: 'center', flexWrap: 'wrap', }, -})); +}); class ChipsArray extends Component { state = { @@ -73,4 +73,4 @@ ChipsArray.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ChipsArray); +export default withStyles(styles)(ChipsArray); diff --git a/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js b/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js index 3f5e93d6ad831e..7fbb458bda2ce3 100644 --- a/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js +++ b/docs/src/pages/component-demos/dialogs/ConfirmationDialog.js @@ -3,7 +3,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 Button from 'material-ui/Button'; import List, { ListItem, ListItemText } from 'material-ui/List'; import Dialog, { DialogActions, DialogContent, DialogTitle } from 'material-ui/Dialog'; @@ -106,7 +106,7 @@ ConfirmationDialog.propTypes = { selectedValue: PropTypes.string, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, @@ -116,7 +116,7 @@ const styleSheet = createStyleSheet(theme => ({ width: '80%', maxHeight: 435, }, -})); +}); class ConfirmationDialogDemo extends Component { state = { @@ -174,4 +174,4 @@ ConfirmationDialogDemo.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ConfirmationDialogDemo); +export default withStyles(styles)(ConfirmationDialogDemo); diff --git a/docs/src/pages/component-demos/dialogs/FullScreenDialog.js b/docs/src/pages/component-demos/dialogs/FullScreenDialog.js index 94ca36b2215dd8..43b5ce64ca9fa5 100644 --- a/docs/src/pages/component-demos/dialogs/FullScreenDialog.js +++ b/docs/src/pages/component-demos/dialogs/FullScreenDialog.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 Button from 'material-ui/Button'; import Dialog from 'material-ui/Dialog'; import List, { ListItem, ListItemText } from 'material-ui/List'; @@ -14,14 +14,14 @@ import Typography from 'material-ui/Typography'; import CloseIcon from 'material-ui-icons/Close'; import Slide from 'material-ui/transitions/Slide'; -const styleSheet = createStyleSheet({ +const styles = { appBar: { position: 'relative', }, flex: { flex: 1, }, -}); +}; class FullScreenDialog extends Component { state = { @@ -79,4 +79,4 @@ FullScreenDialog.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FullScreenDialog); +export default withStyles(styles)(FullScreenDialog); diff --git a/docs/src/pages/component-demos/dialogs/SimpleDialog.js b/docs/src/pages/component-demos/dialogs/SimpleDialog.js index 76a857e4a36c9e..997124efcda8a7 100644 --- a/docs/src/pages/component-demos/dialogs/SimpleDialog.js +++ b/docs/src/pages/component-demos/dialogs/SimpleDialog.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { createStyleSheet, withStyles } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Button from 'material-ui/Button'; import Avatar from 'material-ui/Avatar'; import List, { ListItem, ListItemAvatar, ListItemText } from 'material-ui/List'; @@ -14,13 +14,12 @@ import Typography from 'material-ui/Typography'; import blue from 'material-ui/colors/blue'; const emails = ['username@gmail.com', 'user02@gmail.com']; - -const styleSheet = createStyleSheet(() => ({ +const styles = { avatar: { background: blue[100], color: blue[600], }, -})); +}; class SimpleDialog extends Component { handleRequestClose = () => { @@ -70,7 +69,7 @@ SimpleDialog.propTypes = { selectedValue: PropTypes.string, }; -const SimpleDialogWrapped = withStyles(styleSheet)(SimpleDialog); +const SimpleDialogWrapped = withStyles(styles)(SimpleDialog); class SimpleDialogDemo extends Component { state = { diff --git a/docs/src/pages/component-demos/dividers/InsetDividers.js b/docs/src/pages/component-demos/dividers/InsetDividers.js index d74998ded6faf6..4895d615b813dc 100644 --- a/docs/src/pages/component-demos/dividers/InsetDividers.js +++ b/docs/src/pages/component-demos/dividers/InsetDividers.js @@ -2,20 +2,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemText } from 'material-ui/List'; import Avatar from 'material-ui/Avatar'; import Divider from 'material-ui/Divider'; import FolderIcon from 'material-ui-icons/Folder'; import ImageIcon from 'material-ui-icons/Image'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: '360px', background: theme.palette.background.paper, }, -})); +}); function InsetDividers(props) { const classes = props.classes; @@ -42,4 +42,4 @@ InsetDividers.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(InsetDividers); +export default withStyles(styles)(InsetDividers); diff --git a/docs/src/pages/component-demos/dividers/ListDividers.js b/docs/src/pages/component-demos/dividers/ListDividers.js index 6f0abc8eaa5af1..821843d090249a 100644 --- a/docs/src/pages/component-demos/dividers/ListDividers.js +++ b/docs/src/pages/component-demos/dividers/ListDividers.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 List, { ListItem, ListItemText } from 'material-ui/List'; import Divider from 'material-ui/Divider'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: '360px', background: theme.palette.background.paper, }, -})); +}); function ListDividers(props) { const classes = props.classes; @@ -37,4 +37,4 @@ ListDividers.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ListDividers); +export default withStyles(styles)(ListDividers); diff --git a/docs/src/pages/component-demos/drawers/UndockedDrawer.js b/docs/src/pages/component-demos/drawers/UndockedDrawer.js index a9e4326b9f44e9..66590e9778fe75 100644 --- a/docs/src/pages/component-demos/drawers/UndockedDrawer.js +++ b/docs/src/pages/component-demos/drawers/UndockedDrawer.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 Drawer from 'material-ui/Drawer'; import Button from 'material-ui/Button'; import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; @@ -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({ +const styles = { list: { width: 250, flex: 'initial', @@ -24,7 +24,7 @@ const styleSheet = createStyleSheet({ width: 'auto', flex: 'initial', }, -}); +}; class UndockedDrawer extends Component { state = { @@ -176,4 +176,4 @@ UndockedDrawer.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(UndockedDrawer); +export default withStyles(styles)(UndockedDrawer); diff --git a/docs/src/pages/component-demos/grid-list/AdvancedGridList.js b/docs/src/pages/component-demos/grid-list/AdvancedGridList.js index 91aa85c59bcf35..ba6b0436862ff3 100644 --- a/docs/src/pages/component-demos/grid-list/AdvancedGridList.js +++ b/docs/src/pages/component-demos/grid-list/AdvancedGridList.js @@ -2,13 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createStyleSheet, withStyles } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { GridList, GridListTile, GridListTileBar } from 'material-ui/GridList'; import IconButton from 'material-ui/IconButton'; import StarBorderIcon from 'material-ui-icons/StarBorder'; import tileData from './tileData'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -27,7 +27,7 @@ const styleSheet = createStyleSheet(theme => ({ 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' + 'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', }, -})); +}); /** * The example data is structured as follows: @@ -78,4 +78,4 @@ AdvancedGridList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(AdvancedGridList); +export default withStyles(styles)(AdvancedGridList); diff --git a/docs/src/pages/component-demos/grid-list/ImageGridList.js b/docs/src/pages/component-demos/grid-list/ImageGridList.js index 6b5cdd361cab94..8ba256abf22789 100644 --- a/docs/src/pages/component-demos/grid-list/ImageGridList.js +++ b/docs/src/pages/component-demos/grid-list/ImageGridList.js @@ -2,11 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createStyleSheet, withStyles } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { GridList, GridListTile } from 'material-ui/GridList'; import tileData from './tileData'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -21,7 +21,7 @@ const styleSheet = createStyleSheet(theme => ({ subheader: { width: '100%', }, -})); +}); /** * The example data is structured as follows: @@ -61,4 +61,4 @@ ImageGridList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ImageGridList); +export default withStyles(styles)(ImageGridList); diff --git a/docs/src/pages/component-demos/grid-list/SingleLineGridList.js b/docs/src/pages/component-demos/grid-list/SingleLineGridList.js index 9a781f4ac456c4..bd3a33a27dd32b 100644 --- a/docs/src/pages/component-demos/grid-list/SingleLineGridList.js +++ b/docs/src/pages/component-demos/grid-list/SingleLineGridList.js @@ -2,13 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createStyleSheet, withStyles } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { GridList, GridListTile, GridListTileBar } from 'material-ui/GridList'; import IconButton from 'material-ui/IconButton'; import StarBorderIcon from 'material-ui-icons/StarBorder'; import tileData from './tileData'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -28,7 +28,7 @@ const styleSheet = createStyleSheet(theme => ({ background: 'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)', }, -})); +}); /** * The example data is structured as follows: @@ -79,4 +79,4 @@ SingleLineGridList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SingleLineGridList); +export default withStyles(styles)(SingleLineGridList); diff --git a/docs/src/pages/component-demos/grid-list/TitlebarGridList.js b/docs/src/pages/component-demos/grid-list/TitlebarGridList.js index d566de3be1f4cd..9ad3866a27e10b 100644 --- a/docs/src/pages/component-demos/grid-list/TitlebarGridList.js +++ b/docs/src/pages/component-demos/grid-list/TitlebarGridList.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createStyleSheet, withStyles } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { GridList, GridListTile, GridListTileBar } from 'material-ui/GridList'; import Subheader from 'material-ui/List/ListSubheader'; import IconButton from 'material-ui/IconButton'; import InfoIcon from 'material-ui-icons/Info'; import tileData from './tileData'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', @@ -21,7 +21,7 @@ const styleSheet = createStyleSheet(theme => ({ width: 500, height: 450, }, -})); +}); /** * The example data is structured as follows: @@ -76,4 +76,4 @@ TitlebarGridList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(TitlebarGridList); +export default withStyles(styles)(TitlebarGridList); diff --git a/docs/src/pages/component-demos/lists/CheckboxList.js b/docs/src/pages/component-demos/lists/CheckboxList.js index e49c06624055f4..fc621b21eaee02 100644 --- a/docs/src/pages/component-demos/lists/CheckboxList.js +++ b/docs/src/pages/component-demos/lists/CheckboxList.js @@ -2,19 +2,19 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'; import Checkbox from 'material-ui/Checkbox'; import IconButton from 'material-ui/IconButton'; import CommentIcon from 'material-ui-icons/Comment'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); class CheckboxList extends Component { state = { @@ -68,4 +68,4 @@ CheckboxList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CheckboxList); +export default withStyles(styles)(CheckboxList); diff --git a/docs/src/pages/component-demos/lists/CheckboxListSecondary.js b/docs/src/pages/component-demos/lists/CheckboxListSecondary.js index f2039dfb54aa1b..cf1d326f846b6d 100644 --- a/docs/src/pages/component-demos/lists/CheckboxListSecondary.js +++ b/docs/src/pages/component-demos/lists/CheckboxListSecondary.js @@ -2,19 +2,19 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List'; import Checkbox from 'material-ui/Checkbox'; import Avatar from 'material-ui/Avatar'; import remyImage from 'docs/src/assets/images/remy.jpg'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); class CheckboxListSecondary extends Component { state = { @@ -65,4 +65,4 @@ CheckboxListSecondary.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CheckboxListSecondary); +export default withStyles(styles)(CheckboxListSecondary); diff --git a/docs/src/pages/component-demos/lists/FolderList.js b/docs/src/pages/component-demos/lists/FolderList.js index 831c12e0fe5ada..c1ca3e9960e7b7 100644 --- a/docs/src/pages/component-demos/lists/FolderList.js +++ b/docs/src/pages/component-demos/lists/FolderList.js @@ -2,18 +2,18 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemText } from 'material-ui/List'; import Avatar from 'material-ui/Avatar'; import FolderIcon from 'material-ui-icons/Folder'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); function FolderList(props) { const classes = props.classes; @@ -41,4 +41,4 @@ FolderList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FolderList); +export default withStyles(styles)(FolderList); diff --git a/docs/src/pages/component-demos/lists/InsetList.js b/docs/src/pages/component-demos/lists/InsetList.js index 9d07eb094e2f38..971bdd298d75c3 100644 --- a/docs/src/pages/component-demos/lists/InsetList.js +++ b/docs/src/pages/component-demos/lists/InsetList.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 List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; import StarIcon from 'material-ui-icons/Star'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); function InsetList(props) { const classes = props.classes; @@ -35,4 +35,4 @@ InsetList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(InsetList); +export default withStyles(styles)(InsetList); diff --git a/docs/src/pages/component-demos/lists/InteractiveList.js b/docs/src/pages/component-demos/lists/InteractiveList.js index fd12258e41c4fe..4f96d3771d8865 100644 --- a/docs/src/pages/component-demos/lists/InteractiveList.js +++ b/docs/src/pages/component-demos/lists/InteractiveList.js @@ -2,7 +2,7 @@ import React, { cloneElement, Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemAvatar, @@ -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(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, maxWidth: 752, @@ -30,7 +30,7 @@ const styleSheet = createStyleSheet(theme => ({ title: { margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`, }, -})); +}); function generate(element) { return [0, 1, 2].map(value => @@ -173,4 +173,4 @@ InteractiveList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(InteractiveList); +export default withStyles(styles)(InteractiveList); diff --git a/docs/src/pages/component-demos/lists/SimpleList.js b/docs/src/pages/component-demos/lists/SimpleList.js index 7acb33a9495419..b909b9017bc335 100644 --- a/docs/src/pages/component-demos/lists/SimpleList.js +++ b/docs/src/pages/component-demos/lists/SimpleList.js @@ -2,19 +2,19 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; import Divider from 'material-ui/Divider'; import InboxIcon from 'material-ui-icons/Inbox'; import DraftsIcon from 'material-ui-icons/Drafts'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); function SimpleList(props) { const classes = props.classes; @@ -51,4 +51,4 @@ SimpleList.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleList); +export default withStyles(styles)(SimpleList); diff --git a/docs/src/pages/component-demos/lists/SwitchListSecondary.js b/docs/src/pages/component-demos/lists/SwitchListSecondary.js index d3f5d3388c0fa1..c6691de9222967 100644 --- a/docs/src/pages/component-demos/lists/SwitchListSecondary.js +++ b/docs/src/pages/component-demos/lists/SwitchListSecondary.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 List, { ListItem, ListItemIcon, @@ -14,13 +14,13 @@ import Switch from 'material-ui/Switch'; import WifiIcon from 'material-ui-icons/Wifi'; import BluetoothIcon from 'material-ui-icons/Bluetooth'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); class SwitchListSecondary extends Component { state = { @@ -83,4 +83,4 @@ SwitchListSecondary.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SwitchListSecondary); +export default withStyles(styles)(SwitchListSecondary); diff --git a/docs/src/pages/component-demos/menus/SimpleListMenu.js b/docs/src/pages/component-demos/menus/SimpleListMenu.js index 601248fed86bd2..dd0a8790271b8b 100644 --- a/docs/src/pages/component-demos/menus/SimpleListMenu.js +++ b/docs/src/pages/component-demos/menus/SimpleListMenu.js @@ -2,17 +2,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import List, { ListItem, ListItemText } from 'material-ui/List'; import Menu, { MenuItem } from 'material-ui/Menu'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', maxWidth: 360, background: theme.palette.background.paper, }, -})); +}); const options = [ 'Show all notification content', @@ -84,4 +84,4 @@ SimpleListMenu.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleListMenu); +export default withStyles(styles)(SimpleListMenu); diff --git a/docs/src/pages/component-demos/paper/PaperSheet.js b/docs/src/pages/component-demos/paper/PaperSheet.js index 17110e1d6e39e4..34f8650ecc2553 100644 --- a/docs/src/pages/component-demos/paper/PaperSheet.js +++ b/docs/src/pages/component-demos/paper/PaperSheet.js @@ -2,16 +2,16 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: theme.mixins.gutters({ paddingTop: 16, paddingBottom: 16, }), -})); +}); function PaperSheet(props) { const classes = props.classes; @@ -33,4 +33,4 @@ PaperSheet.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(PaperSheet); +export default withStyles(styles)(PaperSheet); diff --git a/docs/src/pages/component-demos/progress/CircularDeterminate.js b/docs/src/pages/component-demos/progress/CircularDeterminate.js index fae781bb94117c..11257fdf56b4f9 100644 --- a/docs/src/pages/component-demos/progress/CircularDeterminate.js +++ b/docs/src/pages/component-demos/progress/CircularDeterminate.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { CircularProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ progress: { margin: `0 ${theme.spacing.unit * 2}px`, }, -})); +}); function CircularDeterminate(props) { const classes = props.classes; @@ -42,4 +42,4 @@ CircularDeterminate.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CircularDeterminate); +export default withStyles(styles)(CircularDeterminate); diff --git a/docs/src/pages/component-demos/progress/CircularFab.js b/docs/src/pages/component-demos/progress/CircularFab.js index d93073fb67424f..fb55ce9465924b 100644 --- a/docs/src/pages/component-demos/progress/CircularFab.js +++ b/docs/src/pages/component-demos/progress/CircularFab.js @@ -2,14 +2,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { CircularProgress } from 'material-ui/Progress'; import green from 'material-ui/colors/green'; import Button from 'material-ui/Button'; import CheckIcon from 'material-ui-icons/Check'; import SaveIcon from 'material-ui-icons/Save'; -const styleSheet = createStyleSheet({ +const styles = { wrapper: { position: 'relative', }, @@ -25,7 +25,7 @@ const styleSheet = createStyleSheet({ top: -2, left: -2, }, -}); +}; class CircularFab extends Component { state = { @@ -82,4 +82,4 @@ CircularFab.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CircularFab); +export default withStyles(styles)(CircularFab); diff --git a/docs/src/pages/component-demos/progress/CircularIndeterminate.js b/docs/src/pages/component-demos/progress/CircularIndeterminate.js index 4cb31e8d324c2c..8c75c5aa0ddf00 100644 --- a/docs/src/pages/component-demos/progress/CircularIndeterminate.js +++ b/docs/src/pages/component-demos/progress/CircularIndeterminate.js @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { CircularProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ progress: { margin: `0 ${theme.spacing.unit * 2}px`, }, -})); +}); function CircularIndeterminate(props) { const classes = props.classes; @@ -27,4 +27,4 @@ CircularIndeterminate.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CircularIndeterminate); +export default withStyles(styles)(CircularIndeterminate); diff --git a/docs/src/pages/component-demos/progress/LinearBuffer.js b/docs/src/pages/component-demos/progress/LinearBuffer.js index c1883cf0a0af25..c3a96d69428bf4 100644 --- a/docs/src/pages/component-demos/progress/LinearBuffer.js +++ b/docs/src/pages/component-demos/progress/LinearBuffer.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { LinearProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet({ +const styles = { root: { width: '100%', marginTop: 30, }, -}); +}; class LinearBuffer extends Component { timer: number; @@ -55,4 +55,4 @@ LinearBuffer.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LinearBuffer); +export default withStyles(styles)(LinearBuffer); diff --git a/docs/src/pages/component-demos/progress/LinearDeterminate.js b/docs/src/pages/component-demos/progress/LinearDeterminate.js index 4a49b0772a95db..ef08b754e82e20 100644 --- a/docs/src/pages/component-demos/progress/LinearDeterminate.js +++ b/docs/src/pages/component-demos/progress/LinearDeterminate.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { LinearProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet({ +const styles = { root: { width: '100%', marginTop: 30, }, -}); +}; class LinearDeterminate extends Component { timer: number; @@ -52,4 +52,4 @@ LinearDeterminate.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LinearDeterminate); +export default withStyles(styles)(LinearDeterminate); diff --git a/docs/src/pages/component-demos/progress/LinearIndeterminate.js b/docs/src/pages/component-demos/progress/LinearIndeterminate.js index 69cddc5e99a922..3cdad7f0065000 100644 --- a/docs/src/pages/component-demos/progress/LinearIndeterminate.js +++ b/docs/src/pages/component-demos/progress/LinearIndeterminate.js @@ -2,15 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { LinearProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet({ +const styles = { root: { width: '100%', marginTop: 30, }, -}); +}; function LinearIndeterminate(props) { const classes = props.classes; @@ -27,4 +27,4 @@ LinearIndeterminate.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LinearIndeterminate); +export default withStyles(styles)(LinearIndeterminate); diff --git a/docs/src/pages/component-demos/progress/LinearQuery.js b/docs/src/pages/component-demos/progress/LinearQuery.js index 52f7ed7405a666..cf947ddbe5cab2 100644 --- a/docs/src/pages/component-demos/progress/LinearQuery.js +++ b/docs/src/pages/component-demos/progress/LinearQuery.js @@ -2,15 +2,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { LinearProgress } from 'material-ui/Progress'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { width: '100%', marginTop: theme.spacing.unit * 3, }, -})); +}); function LinearQuery(props) { const classes = props.classes; @@ -27,4 +27,4 @@ LinearQuery.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LinearQuery); +export default withStyles(styles)(LinearQuery); diff --git a/docs/src/pages/component-demos/selection-controls/Checkboxes.js b/docs/src/pages/component-demos/selection-controls/Checkboxes.js index 7ab47463d574ba..7b6797164ef6f2 100644 --- a/docs/src/pages/component-demos/selection-controls/Checkboxes.js +++ b/docs/src/pages/component-demos/selection-controls/Checkboxes.js @@ -2,16 +2,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import green from 'material-ui/colors/green'; import { FormGroup, FormControlLabel } from 'material-ui/Form'; import Checkbox from 'material-ui/Checkbox'; -const styleSheet = createStyleSheet({ +const styles = { checked: { color: green[500], }, -}); +}; class Checkboxes extends Component { state = { @@ -83,4 +83,4 @@ Checkboxes.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Checkboxes); +export default withStyles(styles)(Checkboxes); diff --git a/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js b/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js index f7597e4654719a..98057e6ca1c63f 100644 --- a/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js +++ b/docs/src/pages/component-demos/selection-controls/RadioButtonsGroup.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Radio, { RadioGroup } from 'material-ui/Radio'; import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ group: { margin: `${theme.spacing.unit}px 0`, }, -})); +}); class RadioButtonsGroup extends Component { state = { @@ -48,4 +48,4 @@ RadioButtonsGroup.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(RadioButtonsGroup); +export default withStyles(styles)(RadioButtonsGroup); diff --git a/docs/src/pages/component-demos/selection-controls/Switches.js b/docs/src/pages/component-demos/selection-controls/Switches.js index 04d97f1dc246b1..7b73b06a8a255f 100644 --- a/docs/src/pages/component-demos/selection-controls/Switches.js +++ b/docs/src/pages/component-demos/selection-controls/Switches.js @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import green from 'material-ui/colors/green'; import Switch from 'material-ui/Switch'; -const styleSheet = createStyleSheet({ +const styles = { bar: {}, checked: { color: green[500], @@ -14,7 +14,7 @@ const styleSheet = createStyleSheet({ backgroundColor: green[500], }, }, -}); +}; class Switches extends Component { state = { @@ -62,4 +62,4 @@ Switches.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Switches); +export default withStyles(styles)(Switches); diff --git a/docs/src/pages/component-demos/snackbars/LongTextSnackbar.js b/docs/src/pages/component-demos/snackbars/LongTextSnackbar.js index 0fbc1b3e6c397c..6720082297ffac 100644 --- a/docs/src/pages/component-demos/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/component-demos/snackbars/LongTextSnackbar.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Button from 'material-ui/Button'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import { SnackbarContent } from 'material-ui/Snackbar'; const action = ( @@ -12,14 +12,14 @@ const action = ( ); -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { marginTop: theme.spacing.unit * 3, }, snackbar: { margin: theme.spacing.unit, }, -})); +}); function LongTextSnackbar(props) { const { classes } = props; @@ -55,4 +55,4 @@ LongTextSnackbar.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(LongTextSnackbar); +export default withStyles(styles)(LongTextSnackbar); diff --git a/docs/src/pages/component-demos/snackbars/SimpleSnackbar.js b/docs/src/pages/component-demos/snackbars/SimpleSnackbar.js index 1c8f6ffc1f8ef9..06aa8eaa9b77bd 100644 --- a/docs/src/pages/component-demos/snackbars/SimpleSnackbar.js +++ b/docs/src/pages/component-demos/snackbars/SimpleSnackbar.js @@ -2,18 +2,18 @@ import React, { Component } 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 Snackbar from 'material-ui/Snackbar'; import IconButton from 'material-ui/IconButton'; import CloseIcon from 'material-ui-icons/Close'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ close: { width: theme.spacing.unit * 4, height: theme.spacing.unit * 4, }, -})); +}); class SimpleSnackbar extends Component { state = { @@ -74,4 +74,4 @@ SimpleSnackbar.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SimpleSnackbar); +export default withStyles(styles)(SimpleSnackbar); diff --git a/docs/src/pages/component-demos/stepper/DotsMobileStepper.js b/docs/src/pages/component-demos/stepper/DotsMobileStepper.js index fe05fae1a6bb7f..c60d5a3a66a478 100644 --- a/docs/src/pages/component-demos/stepper/DotsMobileStepper.js +++ b/docs/src/pages/component-demos/stepper/DotsMobileStepper.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import MobileStepper from 'material-ui/MobileStepper'; -const styleSheet = createStyleSheet({ +const styles = { root: { maxWidth: 400, flexGrow: 1, }, -}); +}; class DotsMobileStepper extends Component { state = { @@ -51,4 +51,4 @@ DotsMobileStepper.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(DotsMobileStepper); +export default withStyles(styles)(DotsMobileStepper); diff --git a/docs/src/pages/component-demos/stepper/ProgressMobileStepper.js b/docs/src/pages/component-demos/stepper/ProgressMobileStepper.js index 7df5bc9f1be615..288f5a69bfaec3 100644 --- a/docs/src/pages/component-demos/stepper/ProgressMobileStepper.js +++ b/docs/src/pages/component-demos/stepper/ProgressMobileStepper.js @@ -2,15 +2,15 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import MobileStepper from 'material-ui/MobileStepper'; -const styleSheet = createStyleSheet({ +const styles = { root: { maxWidth: 400, flexGrow: 1, }, -}); +}; class ProgressMobileStepper extends Component { state = { @@ -51,4 +51,4 @@ ProgressMobileStepper.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ProgressMobileStepper); +export default withStyles(styles)(ProgressMobileStepper); diff --git a/docs/src/pages/component-demos/stepper/TextMobileStepper.js b/docs/src/pages/component-demos/stepper/TextMobileStepper.js index a31996872b84ec..4828f4a1d10d8a 100644 --- a/docs/src/pages/component-demos/stepper/TextMobileStepper.js +++ b/docs/src/pages/component-demos/stepper/TextMobileStepper.js @@ -2,12 +2,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import MobileStepper from 'material-ui/MobileStepper'; import Paper from 'material-ui/Paper'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { maxWidth: 400, flexGrow: 1, @@ -20,7 +20,7 @@ const styleSheet = createStyleSheet(theme => ({ marginBottom: 20, background: theme.palette.background.default, }, -})); +}); class TextMobileStepper extends Component { state = { @@ -68,4 +68,4 @@ TextMobileStepper.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(TextMobileStepper); +export default withStyles(styles)(TextMobileStepper); diff --git a/docs/src/pages/component-demos/tables/BasicTable.js b/docs/src/pages/component-demos/tables/BasicTable.js index ddd1f6d1567156..ef49b489f1f64a 100644 --- a/docs/src/pages/component-demos/tables/BasicTable.js +++ b/docs/src/pages/component-demos/tables/BasicTable.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 Table, { TableBody, TableCell, TableHead, TableRow } from 'material-ui/Table'; import Paper from 'material-ui/Paper'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ paper: { width: '100%', marginTop: theme.spacing.unit * 3, overflowX: 'auto', }, -})); +}); let id = 0; function createData(name, calories, fat, carbs, protein) { @@ -75,4 +75,4 @@ BasicTable.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(BasicTable); +export default withStyles(styles)(BasicTable); diff --git a/docs/src/pages/component-demos/tables/EnhancedTable.js b/docs/src/pages/component-demos/tables/EnhancedTable.js index 873583ee03cd99..c91a8bba35cf48 100644 --- a/docs/src/pages/component-demos/tables/EnhancedTable.js +++ b/docs/src/pages/component-demos/tables/EnhancedTable.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import keycode from 'keycode'; import Table, { TableBody, @@ -84,7 +84,7 @@ class EnhancedTableHead extends Component { } } -const toolbarStyleSheet = createStyleSheet(theme => ({ +const toolbarStyles = theme => ({ root: { paddingRight: 2, }, @@ -107,7 +107,7 @@ const toolbarStyleSheet = createStyleSheet(theme => ({ title: { flex: '0 0 auto', }, -})); +}); let EnhancedTableToolbar = props => { const { numSelected, classes } = props; @@ -144,15 +144,15 @@ EnhancedTableToolbar.propTypes = { numSelected: PropTypes.number.isRequired, }; -EnhancedTableToolbar = withStyles(toolbarStyleSheet)(EnhancedTableToolbar); +EnhancedTableToolbar = withStyles(toolbarStyles)(EnhancedTableToolbar); -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ paper: { width: '100%', marginTop: theme.spacing.unit * 3, overflowX: 'auto', }, -})); +}); class EnhancedTable extends Component { state = { @@ -281,4 +281,4 @@ EnhancedTable.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(EnhancedTable); +export default withStyles(styles)(EnhancedTable); diff --git a/docs/src/pages/component-demos/tabs/BasicTabs.js b/docs/src/pages/component-demos/tabs/BasicTabs.js index c5a9ec0910c11a..24dd2e671e7f14 100644 --- a/docs/src/pages/component-demos/tabs/BasicTabs.js +++ b/docs/src/pages/component-demos/tabs/BasicTabs.js @@ -3,7 +3,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 AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; @@ -16,13 +16,13 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: theme.spacing.unit * 3, backgroundColor: theme.palette.background.paper, }, -})); +}); class BasicTabs extends Component { state = { @@ -66,4 +66,4 @@ BasicTabs.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(BasicTabs); +export default withStyles(styles)(BasicTabs); diff --git a/docs/src/pages/component-demos/tabs/BasicTabsWrappedLabel.js b/docs/src/pages/component-demos/tabs/BasicTabsWrappedLabel.js index 8b3c16fc699e9a..a8d340212ee966 100644 --- a/docs/src/pages/component-demos/tabs/BasicTabsWrappedLabel.js +++ b/docs/src/pages/component-demos/tabs/BasicTabsWrappedLabel.js @@ -3,7 +3,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 AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; @@ -16,13 +16,13 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: theme.spacing.unit * 3, backgroundColor: theme.palette.background.paper, }, -})); +}); class BasicTabsWrappedLabel extends Component { state = { @@ -66,4 +66,4 @@ BasicTabsWrappedLabel.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(BasicTabsWrappedLabel); +export default withStyles(styles)(BasicTabsWrappedLabel); diff --git a/docs/src/pages/component-demos/tabs/CenteredTabs.js b/docs/src/pages/component-demos/tabs/CenteredTabs.js index b36d758d10978d..4f423646168182 100644 --- a/docs/src/pages/component-demos/tabs/CenteredTabs.js +++ b/docs/src/pages/component-demos/tabs/CenteredTabs.js @@ -2,16 +2,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Tabs, { Tab } from 'material-ui/Tabs'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: theme.spacing.unit * 3, }, -})); +}); class CenteredTabs extends Component { state = { @@ -47,4 +47,4 @@ CenteredTabs.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CenteredTabs); +export default withStyles(styles)(CenteredTabs); diff --git a/docs/src/pages/component-demos/tabs/FullWidthTabs.js b/docs/src/pages/component-demos/tabs/FullWidthTabs.js index 9149063bbdbdf2..a97dcfed28e384 100644 --- a/docs/src/pages/component-demos/tabs/FullWidthTabs.js +++ b/docs/src/pages/component-demos/tabs/FullWidthTabs.js @@ -3,7 +3,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 SwipeableViews from 'react-swipeable-views'; import AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; @@ -17,11 +17,11 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { backgroundColor: theme.palette.background.paper, }, -})); +}); class FullWidthTabs extends Component { state = { @@ -74,4 +74,4 @@ FullWidthTabs.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FullWidthTabs); +export default withStyles(styles)(FullWidthTabs); diff --git a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonAuto.js b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonAuto.js index a0ac84886e4151..34556baac7c0ed 100644 --- a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonAuto.js +++ b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonAuto.js @@ -3,7 +3,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 AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; @@ -16,14 +16,14 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, width: '100%', marginTop: theme.spacing.unit * 3, backgroundColor: theme.palette.background.paper, }, -})); +}); class ScrollableTabsButtonAuto extends Component { state = { @@ -94,4 +94,4 @@ ScrollableTabsButtonAuto.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ScrollableTabsButtonAuto); +export default withStyles(styles)(ScrollableTabsButtonAuto); diff --git a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonForce.js b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonForce.js index b15420fc2f800a..dc3a5cdb5ac0f1 100644 --- a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonForce.js +++ b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonForce.js @@ -3,7 +3,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 AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; import PhoneIcon from 'material-ui-icons/Phone'; @@ -23,14 +23,14 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, width: '100%', marginTop: theme.spacing.unit * 3, backgroundColor: theme.palette.background.paper, }, -})); +}); class ScrollableTabsButtonForce extends Component { state = { @@ -101,4 +101,4 @@ ScrollableTabsButtonForce.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ScrollableTabsButtonForce); +export default withStyles(styles)(ScrollableTabsButtonForce); diff --git a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonPrevent.js b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonPrevent.js index c2d7fab27e7ab0..0132609fd0596a 100644 --- a/docs/src/pages/component-demos/tabs/ScrollableTabsButtonPrevent.js +++ b/docs/src/pages/component-demos/tabs/ScrollableTabsButtonPrevent.js @@ -3,7 +3,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 AppBar from 'material-ui/AppBar'; import Tabs, { Tab } from 'material-ui/Tabs'; import PhoneIcon from 'material-ui-icons/Phone'; @@ -23,14 +23,14 @@ TabContainer.propTypes = { children: PropTypes.node.isRequired, }; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, width: '100%', marginTop: theme.spacing.unit * 3, backgroundColor: theme.palette.background.paper, }, -})); +}); class ScrollableTabsButtonPrevent extends Component { state = { @@ -99,4 +99,4 @@ ScrollableTabsButtonPrevent.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ScrollableTabsButtonPrevent); +export default withStyles(styles)(ScrollableTabsButtonPrevent); diff --git a/docs/src/pages/component-demos/text-fields/ComposedTextField.js b/docs/src/pages/component-demos/text-fields/ComposedTextField.js index 678544ec550d58..e7e52468e3e909 100644 --- a/docs/src/pages/component-demos/text-fields/ComposedTextField.js +++ b/docs/src/pages/component-demos/text-fields/ComposedTextField.js @@ -2,13 +2,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Input from 'material-ui/Input'; import InputLabel from 'material-ui/Input/InputLabel'; import FormControl from 'material-ui/Form/FormControl'; import FormHelperText from 'material-ui/Form/FormHelperText'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', @@ -16,7 +16,7 @@ const styleSheet = createStyleSheet(theme => ({ formControl: { margin: theme.spacing.unit, }, -})); +}); class ComposedTextField extends Component { state = { @@ -60,4 +60,4 @@ ComposedTextField.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(ComposedTextField); +export default withStyles(styles)(ComposedTextField); diff --git a/docs/src/pages/component-demos/text-fields/Inputs.js b/docs/src/pages/component-demos/text-fields/Inputs.js index 11cc79f0783980..c059f566a4fc01 100644 --- a/docs/src/pages/component-demos/text-fields/Inputs.js +++ b/docs/src/pages/component-demos/text-fields/Inputs.js @@ -2,10 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Input from 'material-ui/Input/Input'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', @@ -13,7 +13,7 @@ const styleSheet = createStyleSheet(theme => ({ input: { margin: theme.spacing.unit, }, -})); +}); function Inputs(props) { const classes = props.classes; @@ -57,4 +57,4 @@ Inputs.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Inputs); +export default withStyles(styles)(Inputs); diff --git a/docs/src/pages/component-demos/text-fields/TextFieldMargins.js b/docs/src/pages/component-demos/text-fields/TextFieldMargins.js index c21b711274569e..d3199b7c33fa18 100644 --- a/docs/src/pages/component-demos/text-fields/TextFieldMargins.js +++ b/docs/src/pages/component-demos/text-fields/TextFieldMargins.js @@ -2,10 +2,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import TextField from 'material-ui/TextField'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', @@ -15,7 +15,7 @@ const styleSheet = createStyleSheet(theme => ({ marginRight: theme.spacing.unit, width: 200, }, -})); +}); const TextFieldMargins = props => { const classes = props.classes; @@ -53,4 +53,4 @@ TextFieldMargins.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(TextFieldMargins); +export default withStyles(styles)(TextFieldMargins); diff --git a/docs/src/pages/component-demos/text-fields/TextFields.js b/docs/src/pages/component-demos/text-fields/TextFields.js index 1dac971ed7ff05..e02ab33b269efd 100644 --- a/docs/src/pages/component-demos/text-fields/TextFields.js +++ b/docs/src/pages/component-demos/text-fields/TextFields.js @@ -2,10 +2,10 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import TextField from 'material-ui/TextField'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', @@ -15,7 +15,7 @@ const styleSheet = createStyleSheet(theme => ({ marginRight: theme.spacing.unit, width: 200, }, -})); +}); class TextFields extends Component { state = { @@ -128,4 +128,4 @@ TextFields.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(TextFields); +export default withStyles(styles)(TextFields); diff --git a/docs/src/pages/customization/BusinessVariables.js b/docs/src/pages/customization/BusinessVariables.js index b4b9f5ade36a1f..56dd757f9c8b6e 100644 --- a/docs/src/pages/customization/BusinessVariables.js +++ b/docs/src/pages/customization/BusinessVariables.js @@ -3,14 +3,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import Checkbox from 'material-ui/Checkbox'; -import { createMuiTheme, createStyleSheet, MuiThemeProvider, withStyles } from 'material-ui/styles'; +import { createMuiTheme, MuiThemeProvider, withStyles } from 'material-ui/styles'; import orange from 'material-ui/colors/orange'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ danger: { color: theme.status.danger, }, -})); +}); let BusinessCheckbox = props => @@ -21,7 +21,7 @@ BusinessCheckbox.propTypes = { classes: PropTypes.object.isRequired, }; -BusinessCheckbox = withStyles(styleSheet)(BusinessCheckbox); +BusinessCheckbox = withStyles(styles)(BusinessCheckbox); const theme = createMuiTheme({ status: { diff --git a/docs/src/pages/customization/CssInJs.js b/docs/src/pages/customization/CssInJs.js index 31f268c92c4448..8f195a23e88c17 100644 --- a/docs/src/pages/customization/CssInJs.js +++ b/docs/src/pages/customization/CssInJs.js @@ -1,13 +1,13 @@ -// @flow +// @flow weak 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 Typography from 'material-ui/Typography'; // 1. We define the styles. -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { color: 'inherit', textDecoration: 'inherit', @@ -18,7 +18,7 @@ const styleSheet = createStyleSheet(theme => ({ primary: { color: theme.palette.primary[500], }, -})); +}); function MyLink(props) { const { children, classes, className, variant, ...other } = props; @@ -47,7 +47,7 @@ MyLink.propTypes = { }; // 2. We inject the styles. -const MyLinkStyled = withStyles(styleSheet)(MyLink); +const MyLinkStyled = withStyles(styles)(MyLink); export default function CssInJs() { return ( diff --git a/docs/src/pages/customization/DarkTheme.js b/docs/src/pages/customization/DarkTheme.js index 7f3bb570c50870..25321264338b5a 100644 --- a/docs/src/pages/customization/DarkTheme.js +++ b/docs/src/pages/customization/DarkTheme.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; diff --git a/docs/src/pages/customization/JssRegistry.js b/docs/src/pages/customization/JssRegistry.js index b8fcdf82a12693..332cf51f03381b 100644 --- a/docs/src/pages/customization/JssRegistry.js +++ b/docs/src/pages/customization/JssRegistry.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React, { Component } from 'react'; import { JssProvider, SheetsRegistry } from 'react-jss'; diff --git a/docs/src/pages/customization/Nested.js b/docs/src/pages/customization/Nested.js index 978f2c6bfb65cf..b58ff26a8febdd 100644 --- a/docs/src/pages/customization/Nested.js +++ b/docs/src/pages/customization/Nested.js @@ -3,16 +3,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import Checkbox from 'material-ui/Checkbox'; -import { createMuiTheme, createStyleSheet, MuiThemeProvider, withStyles } from 'material-ui/styles'; +import { createMuiTheme, MuiThemeProvider, withStyles } from 'material-ui/styles'; import orange from 'material-ui/colors/orange'; import green from 'material-ui/colors/green'; import pink from 'material-ui/colors/pink'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ danger: { color: theme.status.color, }, -})); +}); let NestedCheckbox = props => @@ -23,7 +23,7 @@ NestedCheckbox.propTypes = { classes: PropTypes.object.isRequired, }; -NestedCheckbox = withStyles(styleSheet)(NestedCheckbox); +NestedCheckbox = withStyles(styles)(NestedCheckbox); const theme1 = createMuiTheme({ status: { diff --git a/docs/src/pages/customization/OverridesClassNames.js b/docs/src/pages/customization/OverridesClassNames.js index 94fc144f1d1f7b..2b3db60b212975 100644 --- a/docs/src/pages/customization/OverridesClassNames.js +++ b/docs/src/pages/customization/OverridesClassNames.js @@ -1,12 +1,12 @@ -// @flow +// @flow weak 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'; // We can inject some CSS into the DOM. -const styleSheet = createStyleSheet({ +const styles = { button: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, @@ -16,7 +16,7 @@ const styleSheet = createStyleSheet({ padding: '0 30px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', }, -}); +}; function OverridesClassNames(props) { return ( @@ -31,4 +31,4 @@ OverridesClassNames.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(OverridesClassNames); +export default withStyles(styles)(OverridesClassNames); diff --git a/docs/src/pages/customization/OverridesClasses.js b/docs/src/pages/customization/OverridesClasses.js index 6d9265ee4eed82..84740961f33130 100644 --- a/docs/src/pages/customization/OverridesClasses.js +++ b/docs/src/pages/customization/OverridesClasses.js @@ -1,11 +1,11 @@ -// @flow +// @flow weak 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'; -const styleSheet = createStyleSheet({ +const styles = { root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, @@ -18,7 +18,7 @@ const styleSheet = createStyleSheet({ label: { textTransform: 'capitalize', }, -}); +}; function OverridesClasses(props) { return ( @@ -38,4 +38,4 @@ OverridesClasses.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(OverridesClasses); +export default withStyles(styles)(OverridesClasses); diff --git a/docs/src/pages/customization/OverridesComponent.js b/docs/src/pages/customization/OverridesComponent.js index f19cd116619305..4cb8da3f15c33d 100644 --- a/docs/src/pages/customization/OverridesComponent.js +++ b/docs/src/pages/customization/OverridesComponent.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import OverridesClassNames from 'docs/src/pages/customization/OverridesClassNames'; diff --git a/docs/src/pages/customization/OverridesInlineStyle.js b/docs/src/pages/customization/OverridesInlineStyle.js index 127463b50ad0f9..5246d8e62e00b2 100644 --- a/docs/src/pages/customization/OverridesInlineStyle.js +++ b/docs/src/pages/customization/OverridesInlineStyle.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import Button from 'material-ui/Button'; diff --git a/docs/src/pages/customization/OverridesTheme.js b/docs/src/pages/customization/OverridesTheme.js index ffe47d605bdf7b..641c05e98ce090 100644 --- a/docs/src/pages/customization/OverridesTheme.js +++ b/docs/src/pages/customization/OverridesTheme.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; diff --git a/docs/src/pages/customization/Palette.js b/docs/src/pages/customization/Palette.js index edfd8035f63ae9..7f6acdacc2fdf9 100644 --- a/docs/src/pages/customization/Palette.js +++ b/docs/src/pages/customization/Palette.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; diff --git a/docs/src/pages/customization/ThemeDefault.js b/docs/src/pages/customization/ThemeDefault.js index 676339e841af61..08cfa215ed5ead 100644 --- a/docs/src/pages/customization/ThemeDefault.js +++ b/docs/src/pages/customization/ThemeDefault.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; diff --git a/docs/src/pages/customization/TypographyTheme.js b/docs/src/pages/customization/TypographyTheme.js index 089006e95eaf11..d4e05fdefc577b 100644 --- a/docs/src/pages/customization/TypographyTheme.js +++ b/docs/src/pages/customization/TypographyTheme.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; diff --git a/docs/src/pages/customization/WithTheme.js b/docs/src/pages/customization/WithTheme.js index eed6a6a331859a..ec8747232b0a64 100644 --- a/docs/src/pages/customization/WithTheme.js +++ b/docs/src/pages/customization/WithTheme.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; diff --git a/docs/src/pages/customization/css-in-js.md b/docs/src/pages/customization/css-in-js.md index 720ef9f4d41e1a..0381288b70c765 100644 --- a/docs/src/pages/customization/css-in-js.md +++ b/docs/src/pages/customization/css-in-js.md @@ -2,19 +2,19 @@ Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity **we expose our internal styling solution to users**. -You can use it, but you don't have to. This styling solution is interoperable with another other one, like [PostCSS](https://github.com/postcss/postcss), [CSS modules](https://github.com/css-modules), or [styled-components](https://github.com/styled-components/styled-components). +You can use it, but you don't have to. This styling solution is interoperable with other solutions like [PostCSS](https://github.com/postcss/postcss), [CSS modules](https://github.com/css-modules), or [styled-components](https://github.com/styled-components/styled-components). ## Our styling solution In the previous versions, Material-UI was using LESS, then a custom inline-style solution to write the style of the components. These approaches have proven to be limited. -Finally, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. We think that it's the future: +Finally, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It's **unlocking many great features** (theme nesting, dynamic styles, self-support, etc.). +We think that it's the future: - [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [The future of component-based styling](https://medium.freecodecamp.com/css-in-javascript-the-future-of-component-based-styling-70b161a79a32) -So, you may have noticed in the demos how that *CSS-in-JS* looks. -We use the `createStyleSheet` function and `withStyles` Higher-order Component. -Here is an example: +So, you may have noticed in the demos how this *CSS-in-JS* looks. +We use the `withStyles` Higher-order Component, here is an example: {{demo='pages/customization/CssInJs.js'}} @@ -27,7 +27,7 @@ It is about 5KB (minified and gzipped) and is extensible via a [plugins](https:/ If you end up using that styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features each [plugin](http://cssinjs.org/plugins) is providing. Material-UI is using the [`jss-preset-default`](http://cssinjs.org/jss-preset-default) module. You can always add new plugins if needed with the [`JssProvider` helper](https://github.com/cssinjs/react-jss#custom-setup). -## Sheet registry +## Sheets registry When rendering on the server, you will need to get all rendered styles as a CSS string. `SheetsRegistry` class allows you to manually aggregate and stringify them. @@ -35,12 +35,19 @@ Read more about [Server Rendering here](/guides/server-rendering). {{demo='pages/customization/JssRegistry.js'}} +## Sheets manager + +We use a [reference counting](https://en.wikipedia.org/wiki/Reference_counting) algorithm in order to attach and detach the style sheets only once per (styles, theme) couple. +This technique provides an important performance boost when rerending instances of a component. + +When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering here](/guides/server-rendering). + ## Class names You may have noticed, the class names generated by our styling solution are **non-deterministic**. You can't rely on their name, the following CSS won't work. ```css -.MuiAppBar-root-a2 { +.MuiAppBar-root-12 { opacity: 0.6 } ``` @@ -50,45 +57,11 @@ On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimization for development and production. They are easy to debug in development and as short as possible in production: -- development: `.MuiAppBar-root-a2` -- production: `.ca2` +- development: `.MuiAppBar-root-12` +- production: `.c12` ## API -### `createStyleSheet(styles) => styleSheet` - -Generate a new style sheet that represents the style you want to inject in the DOM. - -#### Arguments - -If the value isn't provided, we will try to fallback to the name of the component. -1. `styles` (*Function | Object*): A function generating the styles or an object. - -Use the function if you need to have access to the theme. It's provided as the first argument. - -#### Returns - -`styleSheet`: The newly created style sheet. - -#### Examples - -```js -import { createStyleSheet } from 'material-ui/styles'; - -const styleSheet = createStyleSheet((theme) => ({ - root: { - color: 'inherit', - textDecoration: 'inherit', - '&:hover': { - textDecoration: 'underline', - }, - }, - primary: { - color: theme.palette.primary[500], - }, -})); -``` - ### `withStyles(styleSheet, [options]) => Higher-order Component` Link a style sheet with a component. @@ -103,10 +76,13 @@ For instance, it can be used to defined a `getInitialProps()` static method (nex #### Arguments -1. `styleSheet` (*Object*): The style sheet to link to the component. This object can be created with `createStyleSheet`. +1. `styles` (*Function | Object*): A function generating the styles or an object. +It will be linked to the component. +Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - - `options.withTheme` (Boolean [optional]): Provide the `theme` object to the component as a property. + - `options.withTheme` (Boolean [optional]): Provide the `theme` object to the component as a property. It's `false` by default. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. + If the value isn't provided, we will try to fallback to the name of the component. #### Returns @@ -117,13 +93,19 @@ For instance, it can be used to defined a `getInitialProps()` static method (nex ```js import { withStyles } from 'material-ui/styles'; +const styles = { + root: { + background: 'red', + }, +}; + class MyComponent extends Component { render () { - return
; + return
; } } -export default withStyles(styleSheet)(MyComponent); +export default withStyles(styles)(MyComponent); ``` Also, you can use as [decorators](https://babeljs.io/docs/plugins/transform-decorators/) like so: @@ -131,10 +113,16 @@ Also, you can use as [decorators](https://babeljs.io/docs/plugins/transform-deco ```js import { withStyles } from 'material-ui/styles'; -@withStyles(styleSheet) +const styles = { + root: { + background: 'red', + }, +}; + +@withStyles(styles) class MyComponent extends Component { render () { - return
; + return
; } } diff --git a/docs/src/pages/guides/Composition.js b/docs/src/pages/guides/Composition.js index 7fd629a99e61f1..4c0d901859c4af 100644 --- a/docs/src/pages/guides/Composition.js +++ b/docs/src/pages/guides/Composition.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import IconButton from 'material-ui/IconButton'; diff --git a/docs/src/pages/layout/css-in-js/MediaQuery.js b/docs/src/pages/layout/css-in-js/MediaQuery.js index 85cf72b84c6590..7af4d9b67401ed 100644 --- a/docs/src/pages/layout/css-in-js/MediaQuery.js +++ b/docs/src/pages/layout/css-in-js/MediaQuery.js @@ -1,13 +1,13 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; import compose from 'recompose/compose'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import withWidth from 'material-ui/utils/withWidth'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { padding: theme.spacing.unit, [theme.breakpoints.up('md')]: { @@ -17,7 +17,7 @@ const styleSheet = createStyleSheet(theme => ({ backgroundColor: theme.palette.accent.A400, }, }, -})); +}); function MediaQuery(props) { const classes = props.classes; @@ -36,4 +36,4 @@ MediaQuery.propTypes = { width: PropTypes.string.isRequired, }; -export default compose(withStyles(styleSheet), withWidth())(MediaQuery); +export default compose(withStyles(styles), withWidth())(MediaQuery); diff --git a/docs/src/pages/layout/grid/AutoGrid.js b/docs/src/pages/layout/grid/AutoGrid.js index 71f5ae9f53931f..e69d1c3e3f23d6 100644 --- a/docs/src/pages/layout/grid/AutoGrid.js +++ b/docs/src/pages/layout/grid/AutoGrid.js @@ -1,12 +1,12 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: 30, @@ -16,7 +16,7 @@ const styleSheet = createStyleSheet(theme => ({ textAlign: 'center', color: theme.palette.text.secondary, }, -})); +}); function AutoGrid(props) { const classes = props.classes; @@ -53,4 +53,4 @@ AutoGrid.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(AutoGrid); +export default withStyles(styles)(AutoGrid); diff --git a/docs/src/pages/layout/grid/CenteredGrid.js b/docs/src/pages/layout/grid/CenteredGrid.js index 95ca1c225c6f9a..f0e2d33e14c7cd 100644 --- a/docs/src/pages/layout/grid/CenteredGrid.js +++ b/docs/src/pages/layout/grid/CenteredGrid.js @@ -1,12 +1,12 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: 30, @@ -16,7 +16,7 @@ const styleSheet = createStyleSheet(theme => ({ textAlign: 'center', color: theme.palette.text.secondary, }, -})); +}); function CenteredGrid(props) { const classes = props.classes; @@ -54,4 +54,4 @@ CenteredGrid.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(CenteredGrid); +export default withStyles(styles)(CenteredGrid); diff --git a/docs/src/pages/layout/grid/FullWidthGrid.js b/docs/src/pages/layout/grid/FullWidthGrid.js index 7ba628da59520b..be19b5601dd22f 100644 --- a/docs/src/pages/layout/grid/FullWidthGrid.js +++ b/docs/src/pages/layout/grid/FullWidthGrid.js @@ -1,12 +1,12 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, marginTop: 30, @@ -16,7 +16,7 @@ const styleSheet = createStyleSheet(theme => ({ textAlign: 'center', color: theme.palette.text.secondary, }, -})); +}); function FullWidthGrid(props) { const classes = props.classes; @@ -54,4 +54,4 @@ FullWidthGrid.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(FullWidthGrid); +export default withStyles(styles)(FullWidthGrid); diff --git a/docs/src/pages/layout/grid/InteractiveGrid.js b/docs/src/pages/layout/grid/InteractiveGrid.js index 994a74d8925201..7c9a9dc2db22ba 100644 --- a/docs/src/pages/layout/grid/InteractiveGrid.js +++ b/docs/src/pages/layout/grid/InteractiveGrid.js @@ -1,14 +1,14 @@ -// @flow +// @flow weak import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Grid from 'material-ui/Grid'; import { FormLabel, FormControlLabel } from 'material-ui/Form'; import Radio, { RadioGroup } from 'material-ui/Radio'; import Paper from 'material-ui/Paper'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, }, @@ -22,7 +22,7 @@ const styleSheet = createStyleSheet(theme => ({ control: { padding: theme.spacing.unit * 2, }, -})); +}); class InteractiveGrid extends Component { state = { @@ -130,4 +130,4 @@ InteractiveGrid.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(InteractiveGrid); +export default withStyles(styles)(InteractiveGrid); diff --git a/docs/src/pages/layout/grid/SpacingGrid.js b/docs/src/pages/layout/grid/SpacingGrid.js index b258a603672a25..b2c23e1433c7de 100644 --- a/docs/src/pages/layout/grid/SpacingGrid.js +++ b/docs/src/pages/layout/grid/SpacingGrid.js @@ -1,14 +1,14 @@ -/* eslint-disable flowtype/require-valid-file-annotation */ +// @flow weak import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Grid from 'material-ui/Grid'; import { FormLabel, FormControlLabel } from 'material-ui/Form'; import Radio, { RadioGroup } from 'material-ui/Radio'; import Paper from 'material-ui/Paper'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, }, @@ -19,7 +19,7 @@ const styleSheet = createStyleSheet(theme => ({ control: { padding: theme.spacing.unit * 2, }, -})); +}); class GuttersGrid extends Component { state = { @@ -78,4 +78,4 @@ GuttersGrid.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(GuttersGrid); +export default withStyles(styles)(GuttersGrid); diff --git a/docs/src/pages/layout/hidden/BreakpointDown.js b/docs/src/pages/layout/hidden/BreakpointDown.js index aee17a97f449d4..ffb1aca6d4b398 100644 --- a/docs/src/pages/layout/hidden/BreakpointDown.js +++ b/docs/src/pages/layout/hidden/BreakpointDown.js @@ -1,14 +1,15 @@ -// @flow +// @flow weak + import React from 'react'; import PropTypes from 'prop-types'; import compose from 'recompose/compose'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Hidden from 'material-ui/Hidden'; import withWidth from 'material-ui/utils/withWidth'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { flexGrow: 1, paddingTop: 30, @@ -32,7 +33,7 @@ const styleSheet = createStyleSheet(theme => ({ top: 0, padding: 5, }, -})); +}); function BreakpointDown(props) { const classes = props.classes; @@ -66,4 +67,4 @@ BreakpointDown.propTypes = { width: PropTypes.string, }; -export default compose(withStyles(styleSheet), withWidth())(BreakpointDown); +export default compose(withStyles(styles), withWidth())(BreakpointDown); diff --git a/docs/src/pages/layout/hidden/BreakpointOnly.js b/docs/src/pages/layout/hidden/BreakpointOnly.js index ff8bc942d9233c..69edf429c4f8ed 100644 --- a/docs/src/pages/layout/hidden/BreakpointOnly.js +++ b/docs/src/pages/layout/hidden/BreakpointOnly.js @@ -1,14 +1,15 @@ -// @flow +// @flow weak + import React from 'react'; import PropTypes from 'prop-types'; import compose from 'recompose/compose'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Hidden from 'material-ui/Hidden'; import withWidth from 'material-ui/utils/withWidth'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { flexGrow: 1, paddingTop: 30, @@ -32,7 +33,7 @@ const styleSheet = createStyleSheet(theme => ({ top: 0, padding: 5, }, -})); +}); function BreakpointOnly(props) { const classes = props.classes; @@ -60,4 +61,4 @@ BreakpointOnly.propTypes = { width: PropTypes.string, }; -export default compose(withStyles(styleSheet), withWidth())(BreakpointOnly); +export default compose(withStyles(styles), withWidth())(BreakpointOnly); diff --git a/docs/src/pages/layout/hidden/BreakpointUp.js b/docs/src/pages/layout/hidden/BreakpointUp.js index 7c4b3f030eb73f..794bbcc9afce26 100644 --- a/docs/src/pages/layout/hidden/BreakpointUp.js +++ b/docs/src/pages/layout/hidden/BreakpointUp.js @@ -1,14 +1,15 @@ -// @flow +// @flow weak + import React from 'react'; import PropTypes from 'prop-types'; import compose from 'recompose/compose'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Hidden from 'material-ui/Hidden'; import withWidth from 'material-ui/utils/withWidth'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ container: { flexGrow: 1, paddingTop: 30, @@ -32,7 +33,7 @@ const styleSheet = createStyleSheet(theme => ({ top: 0, padding: 5, }, -})); +}); function BreakpointUp(props) { const classes = props.classes; @@ -66,4 +67,4 @@ BreakpointUp.propTypes = { width: PropTypes.string, }; -export default compose(withStyles(styleSheet), withWidth())(BreakpointUp); +export default compose(withStyles(styles), withWidth())(BreakpointUp); diff --git a/docs/src/pages/layout/hidden/GridIntegration.js b/docs/src/pages/layout/hidden/GridIntegration.js index 7ee2aaca05c722..516e0909b12b24 100644 --- a/docs/src/pages/layout/hidden/GridIntegration.js +++ b/docs/src/pages/layout/hidden/GridIntegration.js @@ -1,14 +1,15 @@ -// @flow +// @flow weak + import React from 'react'; import PropTypes from 'prop-types'; import compose from 'recompose/compose'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Paper from 'material-ui/Paper'; import Grid from 'material-ui/Grid'; import withWidth from 'material-ui/utils/withWidth'; import Typography from 'material-ui/Typography'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: { flexGrow: 1, paddingTop: 42, @@ -26,7 +27,7 @@ const styleSheet = createStyleSheet(theme => ({ top: 0, padding: 5, }, -})); +}); function GridIntegration(props) { const classes = props.classes; @@ -62,4 +63,4 @@ GridIntegration.propTypes = { width: PropTypes.string, }; -export default compose(withStyles(styleSheet), withWidth())(GridIntegration); +export default compose(withStyles(styles), withWidth())(GridIntegration); diff --git a/docs/src/pages/style/Color.js b/docs/src/pages/style/Color.js index b219511ab2579d..41e7c4d2877f1d 100644 --- a/docs/src/pages/style/Color.js +++ b/docs/src/pages/style/Color.js @@ -1,8 +1,8 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import * as colors from 'material-ui/colors'; import { getContrastRatio } from 'material-ui/styles/colorManipulator'; @@ -28,7 +28,7 @@ const neutralColors = ['Brown', 'Grey', 'Blue Grey']; const mainPalette = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]; const altPalette = ['A100', 'A200', 'A400', 'A700']; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = theme => ({ root: { display: 'flex', flexWrap: 'wrap', @@ -57,7 +57,7 @@ export const styleSheet = createStyleSheet(theme => ({ ...theme.typography.caption, color: 'inherit', }, -})); +}); function getColorBlock(classes, colorName, colorValue, colorTitle) { const bgColor = colors[colorName][colorValue]; @@ -153,4 +153,4 @@ Color.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Color); +export default withStyles(styles)(Color); diff --git a/docs/src/pages/style/Icons.js b/docs/src/pages/style/Icons.js index 5c2c5efcc36724..13813c93a78b37 100644 --- a/docs/src/pages/style/Icons.js +++ b/docs/src/pages/style/Icons.js @@ -1,18 +1,18 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import Icon from 'material-ui/Icon'; -const styleSheet = createStyleSheet({ +const styles = { root: { display: 'flex', alignItems: 'flex-end', justifyContent: 'space-around', width: '70%', }, -}); +}; function Icons(props) { return ( @@ -36,4 +36,4 @@ Icons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(Icons); +export default withStyles(styles)(Icons); diff --git a/docs/src/pages/style/SvgIcons.js b/docs/src/pages/style/SvgIcons.js index 59747d4fa3380c..9b23e53573a7d9 100644 --- a/docs/src/pages/style/SvgIcons.js +++ b/docs/src/pages/style/SvgIcons.js @@ -1,15 +1,15 @@ -// @flow +// @flow weak import React from 'react'; import classNames from 'classnames'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; import blue from 'material-ui/colors/blue'; import green from 'material-ui/colors/green'; import red from 'material-ui/colors/red'; import SvgIcon from 'material-ui/SvgIcon'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ icon: { margin: theme.spacing.unit, }, @@ -22,7 +22,7 @@ const styleSheet = createStyleSheet(theme => ({ fill: green[200], }, }, -})); +}); const HomeIcon = props => @@ -56,4 +56,4 @@ SvgIcons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SvgIcons); +export default withStyles(styles)(SvgIcons); diff --git a/docs/src/pages/style/SvgMaterialIcons.js b/docs/src/pages/style/SvgMaterialIcons.js index 19ed3253c1dc90..b731df8e0a3785 100644 --- a/docs/src/pages/style/SvgMaterialIcons.js +++ b/docs/src/pages/style/SvgMaterialIcons.js @@ -1,16 +1,16 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; import AccessAlarmIcon from 'material-ui-icons/AccessAlarm'; import ThreeDRotation from 'material-ui-icons/ThreeDRotation'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ icon: { margin: theme.spacing.unit, }, -})); +}); function SvgMaterialIcons(props) { const classes = props.classes; @@ -26,4 +26,4 @@ SvgMaterialIcons.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(SvgMaterialIcons); +export default withStyles(styles)(SvgMaterialIcons); diff --git a/docs/src/pages/style/Typography.js b/docs/src/pages/style/Typography.js index c9eab5d615c426..ea6c2cec322b55 100644 --- a/docs/src/pages/style/Typography.js +++ b/docs/src/pages/style/Typography.js @@ -1,4 +1,4 @@ -// @flow +// @flow weak import React from 'react'; import Typography from 'material-ui/Typography'; diff --git a/docs/src/pages/style/TypographyTheme.js b/docs/src/pages/style/TypographyTheme.js index 469ed67bf36eeb..7e6b0cf3d62091 100644 --- a/docs/src/pages/style/TypographyTheme.js +++ b/docs/src/pages/style/TypographyTheme.js @@ -1,12 +1,12 @@ -// @flow +// @flow weak import React from 'react'; import PropTypes from 'prop-types'; -import { withStyles, createStyleSheet } from 'material-ui/styles'; +import { withStyles } from 'material-ui/styles'; -const styleSheet = createStyleSheet(theme => ({ +const styles = theme => ({ root: theme.typography.button, -})); +}); function TypograpghyTheme(props) { return ( @@ -20,4 +20,4 @@ TypograpghyTheme.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styleSheet)(TypograpghyTheme); +export default withStyles(styles)(TypograpghyTheme); diff --git a/examples/create-react-app/src/components/withRoot.js b/examples/create-react-app/src/components/withRoot.js index 04b534b12498a4..177a338efb119a 100644 --- a/examples/create-react-app/src/components/withRoot.js +++ b/examples/create-react-app/src/components/withRoot.js @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import { JssProvider } from 'react-jss'; -import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'; +import { withStyles, MuiThemeProvider } from 'material-ui/styles'; import createContext from '../styles/createContext'; // Apply some reset -const styleSheet = createStyleSheet(theme => ({ +const styles = (theme: Object) => ({ '@global': { html: { background: theme.palette.background.default, @@ -17,11 +17,11 @@ const styleSheet = createStyleSheet(theme => ({ margin: 0, }, }, -})); +}); let AppWrapper = props => props.children; -AppWrapper = withStyles(styleSheet)(AppWrapper); +AppWrapper = withStyles(styles)(AppWrapper); const context = createContext(); diff --git a/examples/create-react-app/src/styles/createContext.js b/examples/create-react-app/src/styles/createContext.js index 13a62e03daabab..530433018e185f 100644 --- a/examples/create-react-app/src/styles/createContext.js +++ b/examples/create-react-app/src/styles/createContext.js @@ -24,7 +24,7 @@ export default function createContext() { jss, theme, // This is needed in order to deduplicate the injection of CSS in the page. - sheetsManager: new WeakMap(), + sheetsManager: new Map(), // This is needed in order to inject the critical CSS. sheetsRegistry: new SheetsRegistry(), }; diff --git a/examples/nextjs/components/withRoot.js b/examples/nextjs/components/withRoot.js index 523ef43afbfcdc..06d604a9f8273f 100644 --- a/examples/nextjs/components/withRoot.js +++ b/examples/nextjs/components/withRoot.js @@ -2,11 +2,11 @@ import React, { Component } from 'react'; import { JssProvider } from 'react-jss'; -import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles'; +import { withStyles, MuiThemeProvider } from 'material-ui/styles'; import { getContext, setContext } from '../styles/context'; // Apply some reset -const styleSheet = createStyleSheet(theme => ({ +const styles = (theme: Object) => ({ '@global': { html: { background: theme.palette.background.default, @@ -17,11 +17,11 @@ const styleSheet = createStyleSheet(theme => ({ margin: 0, }, }, -})); +}); let AppWrapper = props => props.children; -AppWrapper = withStyles(styleSheet)(AppWrapper); +AppWrapper = withStyles(styles)(AppWrapper); function withRoot(BaseComponent) { class WithRoot extends Component { diff --git a/examples/nextjs/styles/context.js b/examples/nextjs/styles/context.js index e4ecdc3b00a6d5..3b62312cc4ebac 100644 --- a/examples/nextjs/styles/context.js +++ b/examples/nextjs/styles/context.js @@ -25,7 +25,7 @@ function createContext() { jss, theme, // This is needed in order to deduplicate the injection of CSS in the page. - sheetsManager: new WeakMap(), + sheetsManager: new Map(), // This is needed in order to inject the critical CSS. sheetsRegistry: new SheetsRegistry(), }; diff --git a/src/AppBar/AppBar.js b/src/AppBar/AppBar.js index 6d84658d7fd5ab..746ef4bf2f571e 100644 --- a/src/AppBar/AppBar.js +++ b/src/AppBar/AppBar.js @@ -3,12 +3,11 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { capitalizeFirstLetter } from '../utils/helpers'; import Paper from '../Paper'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', flexDirection: 'column', @@ -43,7 +42,7 @@ export const styleSheet = createStyleSheet(theme => ({ backgroundColor: theme.palette.accent.A200, color: theme.palette.getContrastText(theme.palette.accent.A200), }, -})); +}); type DefaultProps = { classes: Object, @@ -101,4 +100,4 @@ AppBar.defaultProps = { position: 'fixed', }; -export default withStyles(styleSheet, { name: 'MuiAppBar' })(AppBar); +export default withStyles(styles, { name: 'MuiAppBar' })(AppBar); diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js index d2c2485365f280..509ab17d29a2b8 100644 --- a/src/Avatar/Avatar.js +++ b/src/Avatar/Avatar.js @@ -3,11 +3,10 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { emphasize } from '../styles/colorManipulator'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { position: 'relative', display: 'flex', @@ -31,7 +30,7 @@ export const styleSheet = createStyleSheet(theme => ({ width: '100%', height: 'auto', }, -})); +}); type DefaultProps = { classes: Object, @@ -147,4 +146,4 @@ Avatar.defaultProps = { component: 'div', }; -export default withStyles(styleSheet, { name: 'MuiAvatar' })(Avatar); +export default withStyles(styles, { name: 'MuiAvatar' })(Avatar); diff --git a/src/Badge/Badge.js b/src/Badge/Badge.js index c0f34b9bf323bc..62c93035575757 100644 --- a/src/Badge/Badge.js +++ b/src/Badge/Badge.js @@ -3,13 +3,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { capitalizeFirstLetter } from '../utils/helpers'; const RADIUS = 12; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { position: 'relative', display: 'inline-block', @@ -41,7 +40,7 @@ export const styleSheet = createStyleSheet(theme => ({ backgroundColor: theme.palette.accent.A200, color: theme.palette.getContrastText(theme.palette.accent.A200), }, -})); +}); function Badge(props) { const { badgeContent, classes, className: classNameProp, color, children, ...other } = props; @@ -87,4 +86,4 @@ Badge.defaultProps = { color: 'default', }; -export default withStyles(styleSheet, { name: 'MuiBadge' })(Badge); +export default withStyles(styles, { name: 'MuiBadge' })(Badge); diff --git a/src/BottomNavigation/BottomNavigation.js b/src/BottomNavigation/BottomNavigation.js index c1dc7eacffc85c..ce1890e5c40540 100644 --- a/src/BottomNavigation/BottomNavigation.js +++ b/src/BottomNavigation/BottomNavigation.js @@ -3,17 +3,16 @@ import React, { Children, cloneElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', justifyContent: 'center', height: 56, backgroundColor: theme.palette.background.paper, }, -})); +}); function BottomNavigation(props) { const { @@ -79,4 +78,4 @@ BottomNavigation.defaultProps = { showLabels: false, }; -export default withStyles(styleSheet, 'MuiBottomNavigation')(BottomNavigation); +export default withStyles(styles, { name: 'MuiBottomNavigation' })(BottomNavigation); diff --git a/src/BottomNavigation/BottomNavigationButton.js b/src/BottomNavigation/BottomNavigationButton.js index 9294a8b2c3ffa3..66cdb3bff6784c 100644 --- a/src/BottomNavigation/BottomNavigationButton.js +++ b/src/BottomNavigation/BottomNavigationButton.js @@ -3,12 +3,11 @@ import React, { Component, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; import Icon from '../Icon'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { transition: theme.transitions.create(['color', 'padding-top'], { duration: theme.transitions.duration.short, @@ -48,7 +47,7 @@ export const styleSheet = createStyleSheet(theme => ({ display: 'block', margin: 'auto', }, -})); +}); class BottomNavigationButton extends Component { handleChange = event => { @@ -151,6 +150,4 @@ BottomNavigationButton.propTypes = { value: PropTypes.number, }; -export default withStyles(styleSheet, { name: 'MuiBottomNavigationButton' })( - BottomNavigationButton, -); +export default withStyles(styles, { name: 'MuiBottomNavigationButton' })(BottomNavigationButton); diff --git a/src/Button/Button.js b/src/Button/Button.js index 7015fee93a901e..73ef7f01f84da5 100644 --- a/src/Button/Button.js +++ b/src/Button/Button.js @@ -3,12 +3,11 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { fade } from '../styles/colorManipulator'; import ButtonBase from '../ButtonBase'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { ...theme.typography.button, lineHeight: '1em', @@ -151,7 +150,7 @@ export const styleSheet = createStyleSheet(theme => ({ boxShadow: theme.shadows[12], }, }, -})); +}); type DefaultProps = { classes: Object, @@ -285,4 +284,4 @@ Button.defaultProps = { type: 'button', }; -export default withStyles(styleSheet, { name: 'MuiButton' })(Button); +export default withStyles(styles, { name: 'MuiButton' })(Button); diff --git a/src/ButtonBase/ButtonBase.js b/src/ButtonBase/ButtonBase.js index a68e8510ccf55b..f4c78742969897 100644 --- a/src/ButtonBase/ButtonBase.js +++ b/src/ButtonBase/ButtonBase.js @@ -6,13 +6,12 @@ import { findDOMNode } from 'react-dom'; import warning from 'warning'; import classNames from 'classnames'; import keycode from 'keycode'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { listenForFocusKeys, detectKeyboardFocus, focusKeyPressed } from '../utils/keyboardFocus'; import TouchRipple from './TouchRipple'; import createRippleHandler from './createRippleHandler'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { position: 'relative', // Remove grey highlight @@ -30,7 +29,7 @@ export const styleSheet = createStyleSheet(theme => ({ pointerEvents: 'none', // Disable link interactions cursor: 'default', }, -})); +}); type DefaultProps = { centerRipple: boolean, @@ -390,4 +389,4 @@ class ButtonBase extends Component { } } -export default withStyles(styleSheet, { name: 'MuiButtonBase' })(ButtonBase); +export default withStyles(styles, { name: 'MuiButtonBase' })(ButtonBase); diff --git a/src/ButtonBase/TouchRipple.js b/src/ButtonBase/TouchRipple.js index 6e41e2d990c8d7..bdd577feb07484 100644 --- a/src/ButtonBase/TouchRipple.js +++ b/src/ButtonBase/TouchRipple.js @@ -5,13 +5,12 @@ import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import TransitionGroup from 'react-transition-group/TransitionGroup'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import Ripple from './Ripple'; const DURATION = 550; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'block', position: 'absolute', @@ -88,7 +87,7 @@ export const styleSheet = createStyleSheet(theme => ({ rippleFast: { animationDuration: '200ms', }, -})); +}); /** * @ignore - internal component. @@ -252,4 +251,4 @@ TouchRipple.propTypes = { className: PropTypes.string, }; -export default withStyles(styleSheet, { name: 'MuiTouchRipple' })(TouchRipple); +export default withStyles(styles, { name: 'MuiTouchRipple' })(TouchRipple); diff --git a/src/Card/CardActions.js b/src/Card/CardActions.js index 139440903af504..c7c2d9aeb9b590 100644 --- a/src/Card/CardActions.js +++ b/src/Card/CardActions.js @@ -3,11 +3,10 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { cloneChildrenWithClassName } from '../utils/reactHelpers'; -export const styleSheet = createStyleSheet({ +export const styles = { root: { height: 52, display: 'flex', @@ -17,7 +16,7 @@ export const styleSheet = createStyleSheet({ actionSpacing: { margin: '0 4px', }, -}); +}; type DefaultProps = { classes: Object, @@ -61,4 +60,4 @@ CardActions.defaultProps = { disableActionSpacing: false, }; -export default withStyles(styleSheet, { name: 'MuiCardActions' })(CardActions); +export default withStyles(styles, { name: 'MuiCardActions' })(CardActions); diff --git a/src/Card/CardContent.js b/src/Card/CardContent.js index 61793122d40ed6..533ca66c5d73a8 100644 --- a/src/Card/CardContent.js +++ b/src/Card/CardContent.js @@ -2,17 +2,16 @@ import React from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { padding: theme.spacing.unit * 2, '&:last-child': { paddingBottom: theme.spacing.unit * 3, }, }, -})); +}); type DefaultProps = { classes: Object, @@ -37,4 +36,4 @@ function CardContent(props: AllProps) { return
; } -export default withStyles(styleSheet, { name: 'MuiCardContent' })(CardContent); +export default withStyles(styles, { name: 'MuiCardContent' })(CardContent); diff --git a/src/Card/CardHeader.js b/src/Card/CardHeader.js index fb4cf5e2ac8990..d2ac7849d85803 100644 --- a/src/Card/CardHeader.js +++ b/src/Card/CardHeader.js @@ -3,12 +3,11 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import Typography from '../Typography'; import CardContent from './CardContent'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', alignItems: 'center', @@ -22,7 +21,7 @@ export const styleSheet = createStyleSheet(theme => ({ }, title: {}, subheader: {}, -})); +}); type DefaultProps = { classes: Object, @@ -85,4 +84,4 @@ function CardHeader(props: AllProps) { ); } -export default withStyles(styleSheet, { name: 'MuiCardHeader' })(CardHeader); +export default withStyles(styles, { name: 'MuiCardHeader' })(CardHeader); diff --git a/src/Card/CardMedia.js b/src/Card/CardMedia.js index 3a68b9f23eef19..5c59d6fab303a5 100644 --- a/src/Card/CardMedia.js +++ b/src/Card/CardMedia.js @@ -2,15 +2,14 @@ import React from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet({ +export const styles = { root: { backgroundSize: 'cover', backgroundRepeat: 'no-repeat', }, -}); +}; type DefaultProps = { classes: Object, @@ -46,4 +45,4 @@ function CardMedia(props: AllProps) { ); } -export default withStyles(styleSheet, { name: 'MuiCardMedia' })(CardMedia); +export default withStyles(styles, { name: 'MuiCardMedia' })(CardMedia); diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js index c3a6170479fbc4..428e97d7ad9bd0 100644 --- a/src/Checkbox/Checkbox.js +++ b/src/Checkbox/Checkbox.js @@ -2,12 +2,11 @@ import React from 'react'; import type { Element } from 'react'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import createSwitch from '../internal/SwitchBase'; import IndeterminateCheckBoxIcon from '../svg-icons/indeterminate-check-box'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ default: { color: theme.palette.text.secondary, }, @@ -17,9 +16,9 @@ export const styleSheet = createStyleSheet(theme => ({ disabled: { color: theme.palette.action.disabled, }, -})); +}); -export const SwitchBase = withStyles(styleSheet, { name: 'MuiCheckbox' })(createSwitch()); +export const SwitchBase = withStyles(styles, { name: 'MuiCheckbox' })(createSwitch()); export type Props = { /** diff --git a/src/Chip/Chip.js b/src/Chip/Chip.js index b12385616395ea..cdc424d912537c 100644 --- a/src/Chip/Chip.js +++ b/src/Chip/Chip.js @@ -4,12 +4,11 @@ import React, { Component, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import keycode from 'keycode'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import DeleteIcon from '../svg-icons/cancel'; import { emphasize, fade } from '../styles/colorManipulator'; -export const styleSheet = createStyleSheet(theme => { +export const styles = (theme: Object) => { const height = 32; const backgroundColor = emphasize(theme.palette.background.default, 0.12); const deleteIconColor = fade(theme.palette.text.primary, 0.26); @@ -77,7 +76,7 @@ export const styleSheet = createStyleSheet(theme => { }, }, }; -}); +}; /** * Chips represent complex entities in small blocks, such as a contact. @@ -212,4 +211,4 @@ Chip.propTypes = { tabIndex: PropTypes.number, }; -export default withStyles(styleSheet, { name: 'MuiChip' })(Chip); +export default withStyles(styles, { name: 'MuiChip' })(Chip); diff --git a/src/Dialog/Dialog.js b/src/Dialog/Dialog.js index bc56c01d6c1f46..e4d975094d79fd 100644 --- a/src/Dialog/Dialog.js +++ b/src/Dialog/Dialog.js @@ -3,7 +3,6 @@ import React, { createElement, cloneElement } from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { capitalizeFirstLetter } from '../utils/helpers'; import Modal from '../internal/Modal'; @@ -12,7 +11,7 @@ import { duration } from '../styles/transitions'; import Paper from '../Paper'; import type { TransitionCallback } from '../internal/Transition'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { justifyContent: 'center', alignItems: 'center', @@ -45,7 +44,7 @@ export const styleSheet = createStyleSheet(theme => ({ maxHeight: '100%', borderRadius: 0, }, -})); +}); type DefaultProps = { classes: Object, @@ -227,4 +226,4 @@ Dialog.defaultProps = { transition: Fade, }; -export default withStyles(styleSheet, { name: 'MuiDialog' })(Dialog); +export default withStyles(styles, { name: 'MuiDialog' })(Dialog); diff --git a/src/Dialog/DialogActions.js b/src/Dialog/DialogActions.js index afa2f5609c517f..5ed4f129c44d02 100644 --- a/src/Dialog/DialogActions.js +++ b/src/Dialog/DialogActions.js @@ -3,11 +3,10 @@ import React, { Children, cloneElement, isValidElement } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import '../Button'; // So we don't have any override priority issue. -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', justifyContent: 'flex-end', @@ -21,7 +20,7 @@ export const styleSheet = createStyleSheet(theme => ({ button: { minWidth: 64, }, -})); +}); function DialogActions(props) { const { children, classes, className, ...other } = props; @@ -57,4 +56,4 @@ DialogActions.propTypes = { className: PropTypes.string, }; -export default withStyles(styleSheet, { name: 'MuiDialogActions' })(DialogActions); +export default withStyles(styles, { name: 'MuiDialogActions' })(DialogActions); diff --git a/src/Dialog/DialogContent.js b/src/Dialog/DialogContent.js index 5e6deea0d3572c..01fe9c85d76969 100644 --- a/src/Dialog/DialogContent.js +++ b/src/Dialog/DialogContent.js @@ -3,10 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => { +export const styles = (theme: Object) => { const spacing = theme.spacing.unit * 3; return { root: { @@ -18,7 +17,7 @@ export const styleSheet = createStyleSheet(theme => { }, }, }; -}); +}; function DialogContent(props) { const { classes, children, className, ...other } = props; @@ -45,4 +44,4 @@ DialogContent.propTypes = { className: PropTypes.string, }; -export default withStyles(styleSheet, { name: 'MuiDialogContent' })(DialogContent); +export default withStyles(styles, { name: 'MuiDialogContent' })(DialogContent); diff --git a/src/Dialog/DialogContentText.js b/src/Dialog/DialogContentText.js index 741324249f146e..492129fa21cafe 100644 --- a/src/Dialog/DialogContentText.js +++ b/src/Dialog/DialogContentText.js @@ -3,16 +3,15 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { ...theme.typography.subheading, color: theme.palette.text.secondary, margin: 0, }, -})); +}); function DialogContentText(props) { const { children, classes, className, ...other } = props; @@ -39,4 +38,4 @@ DialogContentText.propTypes = { className: PropTypes.string, }; -export default withStyles(styleSheet, { name: 'MuiDialogContentText' })(DialogContentText); +export default withStyles(styles, { name: 'MuiDialogContentText' })(DialogContentText); diff --git a/src/Dialog/DialogTitle.js b/src/Dialog/DialogTitle.js index 03739d20d5cf26..865bb28f5fddd6 100644 --- a/src/Dialog/DialogTitle.js +++ b/src/Dialog/DialogTitle.js @@ -3,18 +3,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import Typography from '../Typography'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { margin: 0, padding: `${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px \ 20px ${theme.spacing.unit * 3}px`, flex: '0 0 auto', }, -})); +}); function DialogTitle(props) { const { children, classes, className, disableTypography, ...other } = props; @@ -54,4 +53,4 @@ DialogTitle.defaultProps = { disableTypography: false, }; -export default withStyles(styleSheet, { name: 'MuiDialogTitle' })(DialogTitle); +export default withStyles(styles, { name: 'MuiDialogTitle' })(DialogTitle); diff --git a/src/Divider/Divider.js b/src/Divider/Divider.js index c997f993ac6a04..81ed2297d96e6f 100644 --- a/src/Divider/Divider.js +++ b/src/Divider/Divider.js @@ -3,10 +3,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { height: 1, margin: 0, // Reset browser default style. @@ -27,7 +26,7 @@ export const styleSheet = createStyleSheet(theme => ({ left: 0, width: '100%', }, -})); +}); function Divider(props) { const { absolute, classes, className: classNameProp, inset, light, ...other } = props; @@ -71,4 +70,4 @@ Divider.defaultProps = { light: false, }; -export default withStyles(styleSheet, { name: 'MuiDivider' })(Divider); +export default withStyles(styles, { name: 'MuiDivider' })(Divider); diff --git a/src/Drawer/Drawer.js b/src/Drawer/Drawer.js index c32f1a521a789d..21eb52bb1bcac1 100644 --- a/src/Drawer/Drawer.js +++ b/src/Drawer/Drawer.js @@ -4,7 +4,6 @@ import React, { Component } from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; import Modal from '../internal/Modal'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import Slide from '../transitions/Slide'; import Paper from '../Paper'; @@ -24,7 +23,7 @@ function getSlideDirection(anchor) { return 'up'; } -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ paper: { overflowY: 'auto', display: 'flex', @@ -71,7 +70,7 @@ export const styleSheet = createStyleSheet(theme => ({ }, }, modal: {}, -})); +}); type DefaultProps = { anchor: 'left', @@ -232,4 +231,4 @@ class Drawer extends Component { } } -export default withStyles(styleSheet, { withTheme: true, name: 'MuiDrawer' })(Drawer); +export default withStyles(styles, { withTheme: true, name: 'MuiDrawer' })(Drawer); diff --git a/src/Form/FormControl.js b/src/Form/FormControl.js index 4df91dd6b4d90f..025b0a88444d30 100644 --- a/src/Form/FormControl.js +++ b/src/Form/FormControl.js @@ -4,12 +4,11 @@ import React, { Children, Component } from 'react'; import type { Element } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; import { isDirty } from '../Input/Input'; import { isMuiComponent } from '../utils/reactHelpers'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'inline-flex', flexDirection: 'column', @@ -26,7 +25,7 @@ export const styleSheet = createStyleSheet(theme => ({ fullWidth: { width: '100%', }, -})); +}); type DefaultProps = { disabled: boolean, @@ -202,4 +201,4 @@ class FormControl extends Component { } } -export default withStyles(styleSheet, { name: 'MuiFormControl' })(FormControl); +export default withStyles(styles, { name: 'MuiFormControl' })(FormControl); diff --git a/src/Form/FormControlLabel.js b/src/Form/FormControlLabel.js index 6d730b1424b0d2..d0c942432d280d 100644 --- a/src/Form/FormControlLabel.js +++ b/src/Form/FormControlLabel.js @@ -4,10 +4,9 @@ import React, { cloneElement } from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'inline-flex', alignItems: 'center', @@ -27,7 +26,7 @@ export const styleSheet = createStyleSheet(theme => ({ fontFamily: theme.typography.fontFamily, userSelect: 'none', }, -})); +}); type DefaultProps = { classes: Object, @@ -126,4 +125,4 @@ FormControlLabel.defaultProps = { disabled: false, }; -export default withStyles(styleSheet, { name: 'MuiFormControlLabel' })(FormControlLabel); +export default withStyles(styles, { name: 'MuiFormControlLabel' })(FormControlLabel); diff --git a/src/Form/FormGroup.js b/src/Form/FormGroup.js index 3d0493c4092f92..b2c8e0ad94da4e 100644 --- a/src/Form/FormGroup.js +++ b/src/Form/FormGroup.js @@ -3,10 +3,9 @@ import React from 'react'; import type { Element } from 'react'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet({ +export const styles = { root: { display: 'flex', flexDirection: 'column', @@ -15,7 +14,7 @@ export const styleSheet = createStyleSheet({ row: { flexDirection: 'row', }, -}); +}; type DefaultProps = { classes: Object, @@ -67,4 +66,4 @@ FormGroup.defaultProps = { row: false, }; -export default withStyles(styleSheet, { name: 'MuiFormGroup' })(FormGroup); +export default withStyles(styles, { name: 'MuiFormGroup' })(FormGroup); diff --git a/src/Form/FormHelperText.js b/src/Form/FormHelperText.js index 67a5d09d7d77c2..f0b680bf660bb1 100644 --- a/src/Form/FormHelperText.js +++ b/src/Form/FormHelperText.js @@ -4,10 +4,9 @@ import React from 'react'; import type { Element } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => ({ +export const styles = (theme: Object) => ({ root: { color: theme.palette.input.helperText, fontFamily: theme.typography.fontFamily, @@ -27,7 +26,7 @@ export const styleSheet = createStyleSheet(theme => ({ disabled: { color: theme.palette.input.disabled, }, -})); +}); type DefaultProps = { classes: Object, @@ -114,4 +113,4 @@ FormHelperText.contextTypes = { muiFormControl: PropTypes.object, }; -export default withStyles(styleSheet, { name: 'MuiFormHelperText' })(FormHelperText); +export default withStyles(styles, { name: 'MuiFormHelperText' })(FormHelperText); diff --git a/src/Form/FormLabel.js b/src/Form/FormLabel.js index 436b9ee789dfdf..1788c59bab8fa2 100644 --- a/src/Form/FormLabel.js +++ b/src/Form/FormLabel.js @@ -1,14 +1,12 @@ // @flow -/* eslint-disable jsx-a11y/label-has-for */ import React from 'react'; import type { Element } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import createStyleSheet from '../styles/createStyleSheet'; import withStyles from '../styles/withStyles'; -export const styleSheet = createStyleSheet(theme => { +export const styles = (theme: Object) => { const focusColor = theme.palette.primary[theme.palette.type === 'light' ? 'A700' : 'A200']; return { root: { @@ -26,7 +24,7 @@ export const styleSheet = createStyleSheet(theme => { color: theme.palette.input.disabled, }, }; -}); +}; type DefaultProps = { classes: Object, @@ -114,6 +112,7 @@ function FormLabel(props: AllProps, context: { muiFormControl: Object }) { }); return ( + // eslint-disable-next-line jsx-a11y/label-has-for