From c57e2b035a1f06f30df9b0d4cb8f88212272aa43 Mon Sep 17 00:00:00 2001 From: Bogdan Chadkin Date: Tue, 5 Feb 2019 22:30:14 +0100 Subject: [PATCH] [styles] Replace classnames with clsx --- .size-limit.js | 8 ++++---- docs/src/modules/components/AppContent.js | 4 ++-- docs/src/modules/components/AppDrawer.js | 4 ++-- .../src/modules/components/AppDrawerNavItem.js | 4 ++-- docs/src/modules/components/AppTheme.js | 4 ++-- docs/src/modules/components/Demo.js | 4 ++-- docs/src/modules/components/HomeSteps.js | 6 +++--- docs/src/modules/components/Link.js | 4 ++-- docs/src/modules/components/Tidelift.js | 4 ++-- .../pages/customization/css-in-js/CssInJs.js | 4 ++-- .../css-in-js/StyledComponents.js | 4 ++-- .../customization/overrides/ClassNames.js | 4 ++-- .../overrides/DynamicClassName.js | 4 ++-- .../IntegrationReactSelect.hooks.js | 4 ++-- .../autocomplete/IntegrationReactSelect.js | 4 ++-- .../pages/demos/buttons/CustomizedButtons.js | 10 +++------- .../buttons/FloatingActionButtonZoom.hooks.js | 4 ++-- .../demos/buttons/FloatingActionButtonZoom.js | 4 ++-- .../pages/demos/buttons/IconLabelButtons.js | 4 ++-- .../pages/demos/drawers/MiniDrawer.hooks.js | 10 +++++----- docs/src/pages/demos/drawers/MiniDrawer.js | 10 +++++----- .../drawers/PersistentDrawerLeft.hooks.js | 8 ++++---- .../demos/drawers/PersistentDrawerLeft.js | 8 ++++---- .../drawers/PersistentDrawerRight.hooks.js | 8 ++++---- .../demos/drawers/PersistentDrawerRight.js | 8 ++++---- .../expansion-panels/DetailedExpansionPanel.js | 4 ++-- .../progress/CircularIntegration.hooks.js | 4 ++-- .../demos/progress/CircularIntegration.js | 4 ++-- .../demos/selects/MultipleSelect.hooks.js | 4 ++-- docs/src/pages/demos/selects/MultipleSelect.js | 4 ++-- .../snackbars/CustomizedSnackbars.hooks.js | 6 +++--- .../demos/snackbars/CustomizedSnackbars.js | 6 +++--- .../snackbars/FabIntegrationSnackbar.hooks.js | 4 ++-- .../demos/snackbars/FabIntegrationSnackbar.js | 4 ++-- .../pages/demos/tables/EnhancedTable.hooks.js | 4 ++-- docs/src/pages/demos/tables/EnhancedTable.js | 4 ++-- .../demos/tables/ReactVirtualizedTable.js | 10 +++++----- .../text-fields/FilledInputAdornments.hooks.js | 12 ++++++------ .../demos/text-fields/FilledInputAdornments.js | 12 ++++++------ .../text-fields/FilledInputAdornments.tsx | 12 ++++++------ .../text-fields/FilledTextFields.hooks.js | 4 ++-- .../demos/text-fields/FilledTextFields.js | 4 ++-- .../demos/text-fields/FilledTextFields.tsx | 4 ++-- .../demos/text-fields/InputAdornments.hooks.js | 10 +++++----- .../pages/demos/text-fields/InputAdornments.js | 12 +++++------- .../demos/text-fields/InputAdornments.tsx | 12 +++++------- .../OutlinedInputAdornments.hooks.js | 12 ++++++------ .../text-fields/OutlinedInputAdornments.js | 12 ++++++------ .../text-fields/OutlinedInputAdornments.tsx | 12 ++++++------ .../text-fields/OutlinedTextFields.hooks.js | 4 ++-- .../demos/text-fields/OutlinedTextFields.js | 4 ++-- .../demos/text-fields/OutlinedTextFields.tsx | 4 ++-- .../demos/text-fields/TextFields.hooks.js | 4 ++-- docs/src/pages/demos/text-fields/TextFields.js | 4 ++-- .../src/pages/demos/text-fields/TextFields.tsx | 4 ++-- docs/src/pages/getting-started/faq/faq-de.md | 6 +++--- docs/src/pages/getting-started/faq/faq-es.md | 6 +++--- docs/src/pages/getting-started/faq/faq-fr.md | 6 +++--- docs/src/pages/getting-started/faq/faq-ja.md | 6 +++--- docs/src/pages/getting-started/faq/faq-pt.md | 4 ++-- docs/src/pages/getting-started/faq/faq-ru.md | 6 +++--- docs/src/pages/getting-started/faq/faq-zh.md | 10 +++++----- docs/src/pages/getting-started/faq/faq.md | 2 +- .../page-layout-examples/album/Album.js | 4 ++-- .../dashboard/Dashboard.js | 11 ++++------- .../page-layout-examples/pricing/Pricing.js | 4 ++-- .../interoperability/interoperability-de.md | 4 ++-- .../interoperability/interoperability-es.md | 4 ++-- .../interoperability/interoperability-fr.md | 4 ++-- .../interoperability/interoperability-ja.md | 4 ++-- .../interoperability/interoperability-pt.md | 4 ++-- .../interoperability/interoperability-ru.md | 4 ++-- .../interoperability/interoperability-zh.md | 6 +++--- .../interoperability/interoperability.md | 2 +- docs/src/pages/lab/speed-dial/SpeedDials.js | 4 ++-- .../instapaper/theme/core/classes.js | 4 ++-- .../onepirate/modules/components/LayoutBody.js | 4 ++-- .../onepirate/modules/components/Paper.js | 4 ++-- .../onepirate/modules/components/TextField.js | 4 ++-- .../onepirate/modules/form/FormFeedback.js | 4 ++-- .../onepirate/modules/views/AppAppBar.js | 4 ++-- .../modules/views/ProductHeroLayout.js | 4 ++-- .../premium-themes/paperbase/Navigator.js | 8 ++++---- .../tweeper/theme/core/classes.js | 4 ++-- docs/src/pages/style/icons/FontAwesome.js | 14 +++++++------- package.json | 1 - packages/material-ui-docs/package.json | 1 + .../src/MarkdownElement/MarkdownElement.js | 4 ++-- packages/material-ui-lab/package.json | 2 +- packages/material-ui-lab/src/Slider/Slider.js | 16 ++++++++-------- .../material-ui-lab/src/SpeedDial/SpeedDial.js | 6 +++--- .../src/SpeedDialAction/SpeedDialAction.js | 4 ++-- .../src/SpeedDialIcon/SpeedDialIcon.js | 6 +++--- .../src/ToggleButton/ToggleButton.js | 4 ++-- .../src/ToggleButtonGroup/ToggleButtonGroup.js | 4 ++-- packages/material-ui-styles/package.json | 2 +- packages/material-ui-styles/src/styled.js | 6 +++--- packages/material-ui/package.json | 2 +- packages/material-ui/src/AppBar/AppBar.js | 4 ++-- packages/material-ui/src/Avatar/Avatar.js | 6 +++--- packages/material-ui/src/Backdrop/Backdrop.js | 4 ++-- packages/material-ui/src/Badge/Badge.js | 6 +++--- .../src/BottomNavigation/BottomNavigation.js | 4 ++-- .../BottomNavigationAction.js | 6 +++--- .../src/Breadcrumbs/BreadcrumbSeparator.js | 4 ++-- .../material-ui/src/Breadcrumbs/Breadcrumbs.js | 4 ++-- packages/material-ui/src/Button/Button.js | 6 +++--- .../material-ui/src/ButtonBase/ButtonBase.js | 4 ++-- packages/material-ui/src/ButtonBase/Ripple.js | 6 +++--- .../material-ui/src/ButtonBase/TouchRipple.js | 4 ++-- packages/material-ui/src/Card/Card.js | 6 ++---- .../src/CardActionArea/CardActionArea.js | 6 +++--- .../material-ui/src/CardActions/CardActions.js | 4 ++-- .../material-ui/src/CardContent/CardContent.js | 4 ++-- .../material-ui/src/CardHeader/CardHeader.js | 4 ++-- .../material-ui/src/CardMedia/CardMedia.js | 4 ++-- packages/material-ui/src/Checkbox/Checkbox.js | 6 +++--- packages/material-ui/src/Chip/Chip.js | 18 +++++++----------- .../src/CircularProgress/CircularProgress.js | 6 +++--- packages/material-ui/src/Collapse/Collapse.js | 4 ++-- packages/material-ui/src/Dialog/Dialog.js | 8 ++++---- .../src/DialogActions/DialogActions.js | 4 ++-- .../src/DialogContent/DialogContent.js | 4 ++-- .../material-ui/src/DialogTitle/DialogTitle.js | 4 ++-- packages/material-ui/src/Divider/Divider.js | 4 ++-- packages/material-ui/src/Drawer/Drawer.js | 10 +++++----- .../src/ExpansionPanel/ExpansionPanel.js | 4 ++-- .../ExpansionPanelActions.js | 4 ++-- .../ExpansionPanelDetails.js | 4 ++-- .../ExpansionPanelSummary.js | 10 ++++------ packages/material-ui/src/Fab/Fab.js | 6 +++--- .../material-ui/src/FilledInput/FilledInput.js | 4 ++-- .../material-ui/src/FormControl/FormControl.js | 4 ++-- .../src/FormControlLabel/FormControlLabel.js | 6 +++--- .../material-ui/src/FormGroup/FormGroup.js | 4 ++-- .../src/FormHelperText/FormHelperText.js | 4 ++-- .../material-ui/src/FormLabel/FormLabel.js | 6 +++--- packages/material-ui/src/Grid/Grid.js | 4 ++-- packages/material-ui/src/GridList/GridList.js | 4 ++-- .../src/GridListTile/GridListTile.js | 4 ++-- .../src/GridListTileBar/GridListTileBar.js | 8 ++++---- packages/material-ui/src/Hidden/HiddenCss.js | 12 ++++++------ packages/material-ui/src/Icon/Icon.js | 4 ++-- .../material-ui/src/IconButton/IconButton.js | 4 ++-- packages/material-ui/src/Input/Input.js | 4 ++-- .../src/InputAdornment/InputAdornment.js | 4 ++-- .../material-ui/src/InputBase/InputBase.js | 6 +++--- .../material-ui/src/InputLabel/InputLabel.js | 4 ++-- .../src/LinearProgress/LinearProgress.js | 10 +++++----- packages/material-ui/src/Link/Link.js | 4 ++-- packages/material-ui/src/List/List.js | 4 ++-- packages/material-ui/src/ListItem/ListItem.js | 11 ++++------- .../src/ListItemAvatar/ListItemAvatar.js | 6 +++--- .../src/ListItemIcon/ListItemIcon.js | 4 ++-- .../ListItemSecondaryAction.js | 4 ++-- .../src/ListItemText/ListItemText.js | 8 ++++---- .../src/ListSubheader/ListSubheader.js | 4 ++-- packages/material-ui/src/MenuItem/MenuItem.js | 4 ++-- .../src/MobileStepper/MobileStepper.js | 10 +++------- packages/material-ui/src/Modal/Modal.js | 4 ++-- .../src/NativeSelect/NativeSelectInput.js | 4 ++-- .../src/OutlinedInput/NotchedOutline.js | 4 ++-- .../src/OutlinedInput/OutlinedInput.js | 4 ++-- packages/material-ui/src/Paper/Paper.js | 4 ++-- packages/material-ui/src/Radio/Radio.js | 4 ++-- packages/material-ui/src/Select/SelectInput.js | 4 ++-- packages/material-ui/src/Snackbar/Snackbar.js | 4 ++-- .../src/SnackbarContent/SnackbarContent.js | 4 ++-- packages/material-ui/src/Step/Step.js | 4 ++-- .../material-ui/src/StepButton/StepButton.js | 4 ++-- .../src/StepConnector/StepConnector.js | 6 +++--- .../material-ui/src/StepContent/StepContent.js | 4 ++-- packages/material-ui/src/StepIcon/StepIcon.js | 8 ++++---- .../material-ui/src/StepLabel/StepLabel.js | 8 ++++---- packages/material-ui/src/Stepper/Stepper.js | 4 ++-- packages/material-ui/src/SvgIcon/SvgIcon.js | 4 ++-- .../src/SwipeableDrawer/SwipeArea.js | 4 ++-- packages/material-ui/src/Switch/Switch.js | 8 ++++---- packages/material-ui/src/Switch/Switch.test.js | 4 ++-- packages/material-ui/src/Tab/Tab.js | 6 +++--- packages/material-ui/src/Table/Table.js | 4 ++-- .../material-ui/src/TableBody/TableBody.js | 4 ++-- .../material-ui/src/TableCell/TableCell.js | 4 ++-- .../material-ui/src/TableFooter/TableFooter.js | 4 ++-- .../material-ui/src/TableHead/TableHead.js | 4 ++-- packages/material-ui/src/TableRow/TableRow.js | 4 ++-- .../src/TableSortLabel/TableSortLabel.js | 6 +++--- packages/material-ui/src/Tabs/TabIndicator.js | 4 ++-- .../material-ui/src/Tabs/TabScrollButton.js | 4 ++-- packages/material-ui/src/Tabs/Tabs.js | 12 ++++++------ .../material-ui/src/TextField/TextField.js | 4 ++-- packages/material-ui/src/Toolbar/Toolbar.js | 4 ++-- packages/material-ui/src/Tooltip/Tooltip.js | 8 ++++---- .../material-ui/src/Typography/Typography.js | 4 ++-- .../material-ui/src/internal/SwitchBase.js | 4 ++-- packages/material-ui/src/utils/reactHelpers.js | 4 ++-- test/regressions/tests/Input/Inputs.js | 4 ++-- test/regressions/tests/SpeedDial/Directions.js | 4 ++-- yarn.lock | 10 +++++----- 199 files changed, 530 insertions(+), 556 deletions(-) diff --git a/.size-limit.js b/.size-limit.js index 86027af89131a6..a237d32143465e 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -16,13 +16,13 @@ module.exports = [ name: 'The initial cost paid for using one component', webpack: true, path: 'packages/material-ui/build/Paper/index.js', - limit: '18.8 KB', + limit: '18.7 KB', }, { name: 'The initial cost paid for using one component with ES modules', webpack: true, path: 'packages/material-ui/build/esm/Paper/index.js', - limit: '17.9 KB', + limit: '17.8 KB', }, { name: 'The size of the @material-ui/core modules', @@ -53,14 +53,14 @@ module.exports = [ name: 'The size of the @material-ui/core/Button component', webpack: true, path: 'packages/material-ui/build/esm/Button/index.js', - limit: '24.6 KB', + limit: '24.5 KB', }, { // vs https://bundlephobia.com/result?p=react-modal name: 'The size of the @material-ui/core/Modal component', webpack: true, path: 'packages/material-ui/build/esm/Modal/index.js', - limit: '24.1 KB', + limit: '24.0 KB', }, { // vs https://bundlephobia.com/result?p=react-popper diff --git a/docs/src/modules/components/AppContent.js b/docs/src/modules/components/AppContent.js index ab3f29b418a469..a736f0d64e0025 100644 --- a/docs/src/modules/components/AppContent.js +++ b/docs/src/modules/components/AppContent.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; const styles = theme => ({ @@ -27,7 +27,7 @@ const styles = theme => ({ function AppContent(props) { const { className, classes, children } = props; - return
{children}
; + return
{children}
; } AppContent.propTypes = { diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index 2fc1b41d73ec69..e2bca910e967d3 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import { _rewriteUrlForNextExport } from 'next/router'; import { withStyles } from '@material-ui/core/styles'; @@ -130,7 +130,7 @@ function AppDrawer(props) { ( )} - className={classNames(classes.buttonLeaf, `depth-${depth}`)} + className={clsx(classes.buttonLeaf, `depth-${depth}`)} disableRipple onClick={onClick} style={style} diff --git a/docs/src/modules/components/AppTheme.js b/docs/src/modules/components/AppTheme.js index cbf9f80baba13f..fdc118f048cc24 100644 --- a/docs/src/modules/components/AppTheme.js +++ b/docs/src/modules/components/AppTheme.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; import Link from 'docs/src/modules/components/Link'; @@ -26,7 +26,7 @@ function AppTheme(props) { diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 0aa0d4d7d72a93..013f512ca8be03 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -1,7 +1,7 @@ import React from 'react'; import LZString from 'lz-string'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import copy from 'clipboard-copy'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; @@ -321,7 +321,7 @@ class Demo extends React.Component { )}
diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js index fc75e04c29d997..9ffcd42017a15f 100644 --- a/docs/src/modules/components/HomeSteps.js +++ b/docs/src/modules/components/HomeSteps.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import compose from 'recompose/compose'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; @@ -86,7 +86,7 @@ function HomeSteps(props) { return ( - +
{t('installation')} @@ -169,7 +169,7 @@ function HomeSteps(props) { {t('usageButton')} - +
{t('themes')} diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js index 035693d9211abd..2dc068406e1b18 100644 --- a/docs/src/modules/components/Link.js +++ b/docs/src/modules/components/Link.js @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withRouter } from 'next/router'; import NextLink from 'next/link'; import MuiLink from '@material-ui/core/Link'; @@ -16,7 +16,7 @@ function NextWrapper(props) { { function StyledComponent(props) { const { classes, className, ...other } = props; - return ; + return ; } StyledComponent.propTypes = { classes: PropTypes.object.isRequired, diff --git a/docs/src/pages/customization/overrides/ClassNames.js b/docs/src/pages/customization/overrides/ClassNames.js index fe0547e319e075..687e7b71da1d9c 100644 --- a/docs/src/pages/customization/overrides/ClassNames.js +++ b/docs/src/pages/customization/overrides/ClassNames.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; @@ -21,7 +21,7 @@ function ClassNames(props) { const { classes, children, className, ...other } = props; return ( - ); diff --git a/docs/src/pages/customization/overrides/DynamicClassName.js b/docs/src/pages/customization/overrides/DynamicClassName.js index eeea69807efe24..5e4b7799615d53 100644 --- a/docs/src/pages/customization/overrides/DynamicClassName.js +++ b/docs/src/pages/customization/overrides/DynamicClassName.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import FormControlLabel from '@material-ui/core/FormControlLabel'; @@ -47,7 +47,7 @@ class DynamicClassName extends React.Component { label="Blue" /> @@ -83,7 +79,7 @@ function CustomizedButtons(props) { variant="contained" color="primary" disableRipple - className={classNames(classes.margin, classes.bootstrapRoot)} + className={clsx(classes.margin, classes.bootstrapRoot)} > Bootstrap diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js index fc15e6b4be557e..aff0946fb0c448 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.hooks.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import SwipeableViews from 'react-swipeable-views'; import { makeStyles, useTheme } from '@material-ui/styles'; import AppBar from '@material-ui/core/AppBar'; @@ -81,7 +81,7 @@ function FloatingActionButtonZoom() { }, { color: 'inherit', - className: classNames(classes.fab, classes.fabGreen), + className: clsx(classes.fab, classes.fabGreen), icon: , }, ]; diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js index 37810e9b36ee31..68306ac3bf83d7 100644 --- a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js +++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import SwipeableViews from 'react-swipeable-views'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; @@ -83,7 +83,7 @@ class FloatingActionButtonZoom extends React.Component { }, { color: 'inherit', - className: classNames(classes.fab, classes.fabGreen), + className: clsx(classes.fab, classes.fabGreen), icon: , }, ]; diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.js b/docs/src/pages/demos/buttons/IconLabelButtons.js index 90614fd4a7f12c..b41cbff02b7a51 100644 --- a/docs/src/pages/demos/buttons/IconLabelButtons.js +++ b/docs/src/pages/demos/buttons/IconLabelButtons.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import Button from '@material-ui/core/Button'; import { withStyles } from '@material-ui/core/styles'; import DeleteIcon from '@material-ui/icons/Delete'; @@ -46,7 +46,7 @@ function IconLabelButtons(props) { Talk
diff --git a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js index 8a8df2f31de420..037e9f83b7d6a3 100644 --- a/docs/src/pages/demos/drawers/MiniDrawer.hooks.js +++ b/docs/src/pages/demos/drawers/MiniDrawer.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles, useTheme } from '@material-ui/styles'; import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; @@ -100,7 +100,7 @@ function MiniDrawer() { @@ -109,7 +109,7 @@ function MiniDrawer() { color="inherit" aria-label="Open drawer" onClick={handleDrawerOpen} - className={classNames(classes.menuButton, { + className={clsx(classes.menuButton, { [classes.hide]: open, })} > @@ -122,12 +122,12 @@ function MiniDrawer() { @@ -113,7 +113,7 @@ class MiniDrawer extends React.Component { color="inherit" aria-label="Open drawer" onClick={this.handleDrawerOpen} - className={classNames(classes.menuButton, { + className={clsx(classes.menuButton, { [classes.hide]: this.state.open, })} > @@ -126,12 +126,12 @@ class MiniDrawer extends React.Component { @@ -104,7 +104,7 @@ function PersistentDrawerLeft() { color="inherit" aria-label="Open drawer" onClick={handleDrawerOpen} - className={classNames(classes.menuButton, open && classes.hide)} + className={clsx(classes.menuButton, open && classes.hide)} > @@ -147,7 +147,7 @@ function PersistentDrawerLeft() {
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js index f900acebbe8fbb..8322854c6db56c 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerLeft.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerLeft.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import CssBaseline from '@material-ui/core/CssBaseline'; @@ -100,7 +100,7 @@ class PersistentDrawerLeft extends React.Component { @@ -109,7 +109,7 @@ class PersistentDrawerLeft extends React.Component { color="inherit" aria-label="Open drawer" onClick={this.handleDrawerOpen} - className={classNames(classes.menuButton, open && classes.hide)} + className={clsx(classes.menuButton, open && classes.hide)} > @@ -152,7 +152,7 @@ class PersistentDrawerLeft extends React.Component {
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js index f7b301f023f57c..8c8af5448382fa 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles, useTheme } from '@material-ui/styles'; import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; @@ -95,7 +95,7 @@ function PersistentDrawerRight() { @@ -104,7 +104,7 @@ function PersistentDrawerRight() { color="inherit" aria-label="Open drawer" onClick={handleDrawerOpen} - className={classNames(classes.menuButton, open && classes.hide)} + className={clsx(classes.menuButton, open && classes.hide)} > @@ -114,7 +114,7 @@ function PersistentDrawerRight() {
diff --git a/docs/src/pages/demos/drawers/PersistentDrawerRight.js b/docs/src/pages/demos/drawers/PersistentDrawerRight.js index b2de661af25282..b80ffd265d4937 100644 --- a/docs/src/pages/demos/drawers/PersistentDrawerRight.js +++ b/docs/src/pages/demos/drawers/PersistentDrawerRight.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import Drawer from '@material-ui/core/Drawer'; import AppBar from '@material-ui/core/AppBar'; @@ -100,7 +100,7 @@ class PersistentDrawerRight extends React.Component { @@ -109,7 +109,7 @@ class PersistentDrawerRight extends React.Component { color="inherit" aria-label="Open drawer" onClick={this.handleDrawerOpen} - className={classNames(classes.menuButton, open && classes.hide)} + className={clsx(classes.menuButton, open && classes.hide)} > @@ -119,7 +119,7 @@ class PersistentDrawerRight extends React.Component {
diff --git a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js index 16c8ac5281f4f3..b1965fdc9438d3 100644 --- a/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/DetailedExpansionPanel.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; -import classNames from 'classnames'; +import clsx from 'clsx'; import ExpansionPanel from '@material-ui/core/ExpansionPanel'; import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; @@ -65,7 +65,7 @@ function DetailedExpansionPanel(props) {
{}} />
-
+
Select your destination of choice
diff --git a/docs/src/pages/demos/progress/CircularIntegration.hooks.js b/docs/src/pages/demos/progress/CircularIntegration.hooks.js index eed9351280b35d..8caa33d182f894 100644 --- a/docs/src/pages/demos/progress/CircularIntegration.hooks.js +++ b/docs/src/pages/demos/progress/CircularIntegration.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; import green from '@material-ui/core/colors/green'; @@ -46,7 +46,7 @@ function CircularIntegration() { const [success, setSuccess] = React.useState(false); let timer = null; - const buttonClassname = classNames({ + const buttonClassname = clsx({ [classes.buttonSuccess]: success, }); diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js index 0c716b603c3cf8..4db9e652d3b596 100644 --- a/docs/src/pages/demos/progress/CircularIntegration.js +++ b/docs/src/pages/demos/progress/CircularIntegration.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import CircularProgress from '@material-ui/core/CircularProgress'; import green from '@material-ui/core/colors/green'; @@ -73,7 +73,7 @@ class CircularIntegration extends React.Component { render() { const { loading, success } = this.state; const { classes } = this.props; - const buttonClassname = classNames({ + const buttonClassname = clsx({ [classes.buttonSuccess]: success, }); diff --git a/docs/src/pages/demos/selects/MultipleSelect.hooks.js b/docs/src/pages/demos/selects/MultipleSelect.hooks.js index 196d317c16acc9..0fdea873aa2380 100644 --- a/docs/src/pages/demos/selects/MultipleSelect.hooks.js +++ b/docs/src/pages/demos/selects/MultipleSelect.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles, useTheme } from '@material-ui/styles'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; @@ -133,7 +133,7 @@ function MultipleSelect() { ))} - + - + {message} } diff --git a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js index 2542a16e29555b..aa1c23b9036ff5 100644 --- a/docs/src/pages/demos/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/demos/snackbars/CustomizedSnackbars.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import Button from '@material-ui/core/Button'; import CheckCircleIcon from '@material-ui/icons/CheckCircle'; import ErrorIcon from '@material-ui/icons/Error'; @@ -53,11 +53,11 @@ function MySnackbarContent(props) { return ( - + {message} } diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js index 941bb9c0431f5d..0ef58baeb4e077 100644 --- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js +++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -67,7 +67,7 @@ function FabIntegrationSnackbar() { setOpen(false); } - const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown); + const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown); return (
diff --git a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js index e026cfceded85b..07864731a53012 100644 --- a/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js +++ b/docs/src/pages/demos/snackbars/FabIntegrationSnackbar.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; @@ -72,7 +72,7 @@ class FabIntegrationSnackbar extends React.Component { render() { const { classes } = this.props; const { open } = this.state; - const fabClassName = classNames(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown); + const fabClassName = clsx(classes.fab, open ? classes.fabMoveUp : classes.fabMoveDown); return (
diff --git a/docs/src/pages/demos/tables/EnhancedTable.hooks.js b/docs/src/pages/demos/tables/EnhancedTable.hooks.js index fe6ed7ccbc4297..cee9a25f280bb9 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.hooks.js +++ b/docs/src/pages/demos/tables/EnhancedTable.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/styles'; import Table from '@material-ui/core/Table'; @@ -143,7 +143,7 @@ const EnhancedTableToolbar = props => { return ( 0, })} > diff --git a/docs/src/pages/demos/tables/EnhancedTable.js b/docs/src/pages/demos/tables/EnhancedTable.js index 0ed079d1b5241c..ea0bf86cb351f4 100644 --- a/docs/src/pages/demos/tables/EnhancedTable.js +++ b/docs/src/pages/demos/tables/EnhancedTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; @@ -145,7 +145,7 @@ let EnhancedTableToolbar = props => { return ( 0, })} > diff --git a/docs/src/pages/demos/tables/ReactVirtualizedTable.js b/docs/src/pages/demos/tables/ReactVirtualizedTable.js index 568cbe01ef22a0..20648dabab9522 100644 --- a/docs/src/pages/demos/tables/ReactVirtualizedTable.js +++ b/docs/src/pages/demos/tables/ReactVirtualizedTable.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import TableCell from '@material-ui/core/TableCell'; import TableSortLabel from '@material-ui/core/TableSortLabel'; @@ -38,7 +38,7 @@ class MuiVirtualizedTable extends React.PureComponent { getRowClassName = ({ index }) => { const { classes, rowClassName, onRowClick } = this.props; - return classNames(classes.tableRow, classes.flexContainer, rowClassName, { + return clsx(classes.tableRow, classes.flexContainer, rowClassName, { [classes.tableRowHover]: index !== -1 && onRowClick != null, }); }; @@ -48,7 +48,7 @@ class MuiVirtualizedTable extends React.PureComponent { return ( {
{ /> { { /> { /> diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.js b/docs/src/pages/demos/text-fields/FilledTextFields.js index 0189030bd5cddf..f82585e7e230aa 100644 --- a/docs/src/pages/demos/text-fields/FilledTextFields.js +++ b/docs/src/pages/demos/text-fields/FilledTextFields.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -145,7 +145,7 @@ class FilledTextFields extends React.Component { diff --git a/docs/src/pages/demos/text-fields/FilledTextFields.tsx b/docs/src/pages/demos/text-fields/FilledTextFields.tsx index 8fddd83e37aaaf..094a8414ac41e5 100644 --- a/docs/src/pages/demos/text-fields/FilledTextFields.tsx +++ b/docs/src/pages/demos/text-fields/FilledTextFields.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -147,7 +147,7 @@ class FilledTextFields extends React.Component { diff --git a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js index 5eb7cbe64a3094..0968c78a4e2f23 100644 --- a/docs/src/pages/demos/text-fields/InputAdornments.hooks.js +++ b/docs/src/pages/demos/text-fields/InputAdornments.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import IconButton from '@material-ui/core/IconButton'; import Input from '@material-ui/core/Input'; @@ -66,7 +66,7 @@ function InputAdornments() { Kg, }} @@ -74,7 +74,7 @@ function InputAdornments() { $} /> - + Weight - + Password Kg, }} @@ -78,7 +78,7 @@ class InputAdornments extends React.Component { $} /> - + Weight - + Password { Kg, }} @@ -90,7 +90,7 @@ class InputAdornments extends React.Component { { startAdornment={$} /> - + { /> Weight - + Password {
{ /> { { /> { /> diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.js b/docs/src/pages/demos/text-fields/OutlinedTextFields.js index 6b73fbe6816767..a736cc9b147104 100644 --- a/docs/src/pages/demos/text-fields/OutlinedTextFields.js +++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -145,7 +145,7 @@ class OutlinedTextFields extends React.Component { diff --git a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx index 4f630bdfce4b3e..bc08f421d93acf 100644 --- a/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx +++ b/docs/src/pages/demos/text-fields/OutlinedTextFields.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -147,7 +147,7 @@ class OutlinedTextFields extends React.Component { diff --git a/docs/src/pages/demos/text-fields/TextFields.hooks.js b/docs/src/pages/demos/text-fields/TextFields.hooks.js index 0de739bccf54c1..d1b3d5b5d0b537 100644 --- a/docs/src/pages/demos/text-fields/TextFields.hooks.js +++ b/docs/src/pages/demos/text-fields/TextFields.hooks.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { makeStyles } from '@material-ui/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -116,7 +116,7 @@ function TextFields() { diff --git a/docs/src/pages/demos/text-fields/TextFields.tsx b/docs/src/pages/demos/text-fields/TextFields.tsx index 91d58312ec3a91..8d105c5584584d 100644 --- a/docs/src/pages/demos/text-fields/TextFields.tsx +++ b/docs/src/pages/demos/text-fields/TextFields.tsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; import MenuItem from '@material-ui/core/MenuItem'; import TextField from '@material-ui/core/TextField'; @@ -129,7 +129,7 @@ class TextFields extends React.Component { 或 问题提出疑问。 - +- 回答 [StackOverflow在存储库中对标记为问题](https://stackoverflow.com/questions/tagged/material-ui) 或 问题提出疑问。 + 如果您在商业项目中使用材料的用户界面，并希望通过成为支持其持续发展 **赞助商**， 或侧或业余爱好项目，并想成为一个靠山，你可以通过做 [OpenCollective](https://opencollective.com/material-ui)。 - - 筹集的所有资金都是透明管理的，赞助商在README和Material-UI主页上获得认可。 \ No newline at end of file + + 筹集的所有资金都是透明管理的，赞助商在README和Material-UI主页上获得认可。 diff --git a/docs/src/pages/getting-started/faq/faq.md b/docs/src/pages/getting-started/faq/faq.md index 27e65bba81a925..1bc8f9713e22e2 100644 --- a/docs/src/pages/getting-started/faq/faq.md +++ b/docs/src/pages/getting-started/faq/faq.md @@ -8,7 +8,7 @@ For how-to questions and other non-issues, please use [StackOverflow](https://st ## Why aren't my components rendering correctly in production builds? This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle. -For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator). +For Material-UI to work, the `clsx` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js/#creategenerateclassname-options-class-name-generator). To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them. diff --git a/docs/src/pages/getting-started/page-layout-examples/album/Album.js b/docs/src/pages/getting-started/page-layout-examples/album/Album.js index 2fcecd90975b9b..2a634ddf808156 100644 --- a/docs/src/pages/getting-started/page-layout-examples/album/Album.js +++ b/docs/src/pages/getting-started/page-layout-examples/album/Album.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; import CameraIcon from '@material-ui/icons/PhotoCamera'; @@ -106,7 +106,7 @@ function Album(props) {
-
+
{/* End hero unit */} {cards.map(card => ( diff --git a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js index 76dddb182259a9..f10142df4dde78 100644 --- a/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js +++ b/docs/src/pages/getting-started/page-layout-examples/dashboard/Dashboard.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import classNames from 'classnames'; +import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; import CssBaseline from '@material-ui/core/CssBaseline'; import Drawer from '@material-ui/core/Drawer'; @@ -118,17 +118,14 @@ class Dashboard extends React.Component { @@ -151,7 +148,7 @@ class Dashboard extends React.Component { diff --git a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js index 50c9fd9bc64b4f..c4c2a409676b3d 100644 --- a/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js +++ b/docs/src/pages/getting-started/page-layout-examples/pricing/Pricing.js @@ -1,5 +1,5 @@ import React from 'react'; -import classNames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; import AppBar from '@material-ui/core/AppBar'; import Button from '@material-ui/core/Button'; @@ -185,7 +185,7 @@ function Pricing(props) {
{/* Footer */} -