diff --git a/docs/src/pages/css-in-js/advanced/advanced.md b/docs/src/pages/css-in-js/advanced/advanced.md index 2c7ac586e694d8..468d1e7d6fa19f 100644 --- a/docs/src/pages/css-in-js/advanced/advanced.md +++ b/docs/src/pages/css-in-js/advanced/advanced.md @@ -58,7 +58,7 @@ const DeepChild = withTheme(DeepChildRaw); ### Theme nesting You can nest multiple theme providers. -This can be really useful when dealing with different area of your application that have distinct appearance from each other. +This can be really useful when dealing with different areas of your application that have distinct appearance from each other. ```jsx @@ -85,10 +85,10 @@ You can extend the outer theme by providing a function: ## JSS plugins -JSS uses plugins to extend its core, allowing you to cherry-pick the features you need, +JSS uses plugins to extend its core, allowing you to cherry-pick the features you need, and only pay the performance overhead for what you are using. -Not all the plugins are available in Material-UI by default. The following (which is a subset of +Not all the plugins are available in Material-UI by default. The following (which is a subset of [jss-preset-default](https://cssinjs.org/jss-preset-default/)) are included: - [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function/) @@ -140,7 +140,7 @@ const useStyles = makeStyles({ }); ``` -Note that this doesn't support selectors, or nested rules. +Note that this doesn't support selectors or nested rules. {{"demo": "pages/css-in-js/advanced/StringTemplates.js"}} @@ -333,45 +333,36 @@ Refer to [this example](https://github.com/mui-org/material-ui/blob/next/example ## Class names -You may have noticed that the class names generated by `@material-ui/styles` are **non-deterministic**, -so you can't rely on them to stay the same. The class names are generated by [the class name generator](/css-in-js/api/#creategenerateclassname-options-class-name-generator). -Let's take the following style as an example: +### Without a name -```jsx +By default, the class names generated by `@material-ui/styles` are **non-deterministic**, you can't rely on them to stay the same. Let's take the following style as an example: + +```js const useStyles = makeStyles({ root: { opacity: 1, }, -}, { - name: 'AppBar', }); ``` -This will generate a class name such as `AppBar-root-123`. However, the following CSS won't work: - -```css -.AppBar-root-123 { - opacity: 0.6; -} -``` +This will generate a class name such as `makeStyles-root-123`. -You have to use the `classes` property of a component to override them. -The non-deterministic nature of the class names enables optimization for development and production – -they are easy to debug in development, and as short as possible in production: +You have to use the `classes` property of a component to override the class names. +The non-deterministic nature of the class names enables style isolation. -- In **development**, the class name will be: `.AppBar-root-123`, following this logic: +- In **development**, the class name is: `.makeStyles-root-123`, following this logic: ```js -const sheetName = 'AppBar'; +const sheetName = 'makeStyles'; const ruleName = 'root'; const identifier = 123; const className = `${sheetName}-${ruleName}-${identifier}`; ``` -- In **production**, the class name will be: `.jss123`, following this logic: +- In **production**, the class name is: `.jss123`, following this logic: ```js const productionPrefix = 'jss'; @@ -380,8 +371,18 @@ const identifier = 123; const className = `${productionPrefix}-${identifier}`; ``` -If you don't like this default behavior, you can change it. -JSS allows you to supply a [custom class name generator](https://cssinjs.org/jss-api/#generate-your-class-names). +### With `@material-ui/core` + +The generated class names of the `@material-ui/core` components behave differently. +The logic simplifies the style overrides. +As soon as these conditions are met, the class names are **deterministic**: + +- Only one theme provider is used (no theme nesting). +- The style sheet name starts with `Mui`. +- The style rule is fully static (no style function). +- The `disableGlobal` option of the class name generator is false (default). + +These conditions are with the most common use cases of `@material-ui/core`. ## Global CSS @@ -397,32 +398,6 @@ You can also combine JSS generated class names with global ones. {{"demo": "pages/css-in-js/advanced/HybridGlobalCss.js"}} -### Deterministic class names - -We provide an option to make the class names **deterministic** with the [`dangerouslyUseGlobalCSS`](/css-in-js/api/#creategenerateclassname-options-class-name-generator) option. When turned on, the class names will look like this: - -- development: `.AppBar-root` -- production: `.AppBar-root` - -⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** -Relying on it for code running in production has the following implications: - -- It's harder to keep track of `classes` API changes between major releases. -- Global CSS is inherently fragile. - -⚠️ When using `dangerouslyUseGlobalCSS` standalone (without Material-UI), you should name your style sheets using the `options` parameter: - -```jsx -// Hook -const useStyles = makeStyles(styles, { name: 'button' }); - -// Styled-components -const Button = styled(styles, { name: 'button' })(ButtonBase); - -// Higher-order component -const Button = withStyles(styles, { name: 'button' })(ButtonBase); -``` - ## CSS prefixes JSS uses feature detection to apply the correct prefixes. diff --git a/docs/src/pages/css-in-js/api/api.md b/docs/src/pages/css-in-js/api/api.md index 910087127d3b88..1d2024854984de 100644 --- a/docs/src/pages/css-in-js/api/api.md +++ b/docs/src/pages/css-in-js/api/api.md @@ -9,9 +9,9 @@ A function which returns [a class name generator function](http://cssinjs.org/js #### Arguments 1. `options` (*Object* [optional]): - - `options.dangerouslyUseGlobalCSS` (*Boolean* [optional]): Defaults to `false`. Makes the Material-UI class names deterministic. - - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production. - - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators. + - `options.disableGlobal` (*Boolan* [optional]): Default to `false`. Disable the generation of deterministic class names. + - `options.productionPrefix` (*String* [optional]): Defaults to `'jss'`. The string used to prefix the class names in production. You can disable the minification in production by providing an empty string. + - `options.seed` (*String* [optional]): Defaults to `''`. The string used to uniquely identify the generator. It can be used to avoid class name collisions when using multiple generators in the same document. #### Returns @@ -24,7 +24,6 @@ import React from 'react'; import { StylesProvider, createGenerateClassName } from '@material-ui/styles'; const generateClassName = createGenerateClassName({ - dangerouslyUseGlobalCSS: true, productionPrefix: 'c', }); @@ -212,11 +211,11 @@ It should preferably be used at **the root of your component tree**. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | Your component tree. | -| disableGeneration | bool | false | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this property. | -| generateClassName | func | | JSS's class name generator. | -| injectFirst | bool | false | By default, the styles are injected last in the element of your page. They gain more specificity than any other style sheet on your page e.g. CSS modules, styled components. If you want to override the Material-UI's styles, set this prop. | -| jss | object | | JSS's instance. | +| children * | node | | Your component tree. | +| disableGeneration | bool | false | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this property. | +| generateClassName | func | | JSS's class name generator. | +| injectFirst | bool | false | By default, the styles are injected last in the element of your page. They gain more specificity than any other style sheet on your page e.g. CSS modules, styled components. If you want to override the Material-UI's styles, set this prop. | +| jss | object | | JSS's instance. | #### Examples @@ -243,8 +242,8 @@ It should preferably be used at **the root of your component tree**. | Name | Type | Default | Description | |:-----|:-----|:--------|:------------| -| children * | node | | Your component tree. | -| theme * | union: object | func | | A theme object. You can provide a function to extend the outer theme. | +| children * | node | | Your component tree. | +| theme * | union: object | func | | A theme object. You can provide a function to extend the outer theme. | #### Examples diff --git a/docs/src/pages/demos/badges/CustomizedBadge.js b/docs/src/pages/demos/badges/CustomizedBadge.js index 48e9f0e848affa..942d572acf6f64 100644 --- a/docs/src/pages/demos/badges/CustomizedBadge.js +++ b/docs/src/pages/demos/badges/CustomizedBadge.js @@ -1,10 +1,10 @@ import React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Badge from '@material-ui/core/Badge'; -import { makeStyles } from '@material-ui/core/styles'; +import { withStyles } from '@material-ui/core/styles'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; -const useStyles = makeStyles(theme => ({ +const StyledBadge = withStyles(theme => ({ badge: { top: '50%', right: -3, @@ -13,16 +13,14 @@ const useStyles = makeStyles(theme => ({ theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] }`, }, -})); +}))(Badge); function CustomizedBadge() { - const classes = useStyles(); - return ( - + - + ); } diff --git a/docs/src/pages/demos/badges/CustomizedBadge.tsx b/docs/src/pages/demos/badges/CustomizedBadge.tsx index 7afe1b1d2782de..b5bb60f74f80da 100644 --- a/docs/src/pages/demos/badges/CustomizedBadge.tsx +++ b/docs/src/pages/demos/badges/CustomizedBadge.tsx @@ -1,30 +1,26 @@ import React from 'react'; import IconButton from '@material-ui/core/IconButton'; import Badge from '@material-ui/core/Badge'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { withStyles, Theme } from '@material-ui/core/styles'; import ShoppingCartIcon from '@material-ui/icons/ShoppingCart'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - badge: { - top: '50%', - right: -3, - // The border color match the background color. - border: `2px solid ${ - theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] - }`, - }, - }), -); +const StyledBadge = withStyles((theme: Theme) => ({ + badge: { + top: '50%', + right: -3, + // The border color match the background color. + border: `2px solid ${ + theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900] + }`, + }, +}))(Badge); function CustomizedBadge() { - const classes = useStyles(); - return ( - + - + ); } diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js index 8ee0a586039f9f..ba00d9e9f96ec5 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js +++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.js @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; import { emphasize } from '@material-ui/core/styles/colorManipulator'; import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; @@ -9,11 +8,8 @@ import Avatar from '@material-ui/core/Avatar'; import HomeIcon from '@material-ui/icons/Home'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -const styles = theme => ({ +const StyledBreadcrumb = withStyles(theme => ({ root: { - padding: theme.spacing(1), - }, - chip: { backgroundColor: theme.palette.grey[100], height: 24, color: theme.palette.grey[800], @@ -26,30 +22,25 @@ const styles = theme => ({ backgroundColor: emphasize(theme.palette.grey[300], 0.12), }, }, - avatar: { - background: 'none', - marginRight: -theme.spacing(1.5), - }, -}); +}))(props => ); function handleClick(event) { event.preventDefault(); alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert } -function CustomBreadcrumb(props) { - const { classes, ...rest } = props; - return ; -} - -CustomBreadcrumb.propTypes = { - classes: PropTypes.object.isRequired, -}; - -const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb); +const useStyles = makeStyles(theme => ({ + root: { + padding: theme.spacing(1), + }, + avatar: { + background: 'none', + marginRight: -theme.spacing(1.5), + }, +})); -function CustomizedBreadcrumbs(props) { - const { classes } = props; +function CustomizedBreadcrumbs() { + const classes = useStyles(); return ( @@ -77,8 +68,4 @@ function CustomizedBreadcrumbs(props) { ); } -CustomizedBreadcrumbs.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedBreadcrumbs); +export default CustomizedBreadcrumbs; diff --git a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx index ce74a1ad96d137..70c1a7adccdb4b 100644 --- a/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx +++ b/docs/src/pages/demos/breadcrumbs/CustomizedBreadcrumbs.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import { emphasize } from '@material-ui/core/styles/colorManipulator'; import Paper from '@material-ui/core/Paper'; import Breadcrumbs from '@material-ui/core/Breadcrumbs'; @@ -9,52 +8,41 @@ import Avatar from '@material-ui/core/Avatar'; import HomeIcon from '@material-ui/icons/Home'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; -interface CustomBreadcrumbProps extends WithStyles {} +const StyledBreadcrumb = withStyles((theme: Theme) => ({ + root: { + backgroundColor: theme.palette.grey[100], + height: 24, + color: theme.palette.grey[800], + fontWeight: theme.typography.fontWeightRegular, + '&:hover, &:focus': { + backgroundColor: theme.palette.grey[300], + }, + '&:active': { + boxShadow: theme.shadows[1], + backgroundColor: emphasize(theme.palette.grey[300], 0.12), + }, + }, +}))((props: any) => ); -interface CustomizedBreadcrumbsProps extends WithStyles {} +function handleClick(event: React.MouseEvent) { + event.preventDefault(); + alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert +} -const styles = (theme: Theme) => +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { padding: theme.spacing(1), }, - chip: { - backgroundColor: theme.palette.grey[100], - height: 24, - color: theme.palette.grey[800], - fontWeight: theme.typography.fontWeightRegular, - '&:hover, &:focus': { - backgroundColor: theme.palette.grey[300], - }, - '&:active': { - boxShadow: theme.shadows[1], - backgroundColor: emphasize(theme.palette.grey[300], 0.12), - }, - }, avatar: { background: 'none', marginRight: -theme.spacing(1.5), }, - }); + }), +); -function handleClick(event: React.MouseEvent) { - event.preventDefault(); - alert('You clicked a breadcrumb.'); // eslint-disable-line no-alert -} - -function CustomBreadcrumb(props: CustomBreadcrumbProps) { - const { classes, ...rest } = props; - return ; -} - -CustomBreadcrumb.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -const StyledBreadcrumb = withStyles(styles)(CustomBreadcrumb); - -function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) { - const { classes } = props; +function CustomizedBreadcrumbs() { + const classes = useStyles(); return ( @@ -82,8 +70,4 @@ function CustomizedBreadcrumbs(props: CustomizedBreadcrumbsProps) { ); } -CustomizedBreadcrumbs.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedBreadcrumbs); +export default CustomizedBreadcrumbs; diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js index d3501258fc5b47..4e75592ea01412 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.js +++ b/docs/src/pages/demos/buttons/CustomizedButtons.js @@ -1,23 +1,12 @@ import React from 'react'; -import clsx from 'clsx'; -import { createMuiTheme, makeStyles } from '@material-ui/core/styles'; +import { createMuiTheme, withStyles, makeStyles } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const useStyles = makeStyles(theme => ({ - margin: { - margin: theme.spacing(1), - }, - cssRoot: { - color: theme.palette.getContrastText(purple[500]), - backgroundColor: purple[500], - '&:hover': { - backgroundColor: purple[700], - }, - }, - bootstrapRoot: { +const BootstrapButton = withStyles({ + root: { boxShadow: 'none', textTransform: 'none', fontSize: 16, @@ -51,6 +40,22 @@ const useStyles = makeStyles(theme => ({ boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', }, }, +})(Button); + +const ColorButton = withStyles(theme => ({ + root: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, +}))(Button); + +const useStyles = makeStyles(theme => ({ + margin: { + margin: theme.spacing(1), + }, })); const theme = createMuiTheme({ @@ -64,22 +69,17 @@ function CustomizedButtons() { return (
- + - +
); } diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.tsx b/docs/src/pages/demos/buttons/CustomizedButtons.tsx index 0cd4aa9c120f14..e614ade196698e 100644 --- a/docs/src/pages/demos/buttons/CustomizedButtons.tsx +++ b/docs/src/pages/demos/buttons/CustomizedButtons.tsx @@ -1,57 +1,68 @@ import React from 'react'; -import clsx from 'clsx'; -import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import { + createMuiTheme, + createStyles, + withStyles, + makeStyles, + Theme, +} from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; import Button from '@material-ui/core/Button'; import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; +const BootstrapButton = withStyles({ + root: { + boxShadow: 'none', + textTransform: 'none', + fontSize: 16, + padding: '6px 12px', + border: '1px solid', + lineHeight: 1.5, + backgroundColor: '#007bff', + borderColor: '#007bff', + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + backgroundColor: '#0069d9', + borderColor: '#0062cc', + }, + '&:active': { + boxShadow: 'none', + backgroundColor: '#0062cc', + borderColor: '#005cbf', + }, + '&:focus': { + boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', + }, + }, +})(Button); + +const ColorButton = withStyles((theme: Theme) => ({ + root: { + color: theme.palette.getContrastText(purple[500]), + backgroundColor: purple[500], + '&:hover': { + backgroundColor: purple[700], + }, + }, +}))(Button); + const useStyles = makeStyles((theme: Theme) => createStyles({ margin: { margin: theme.spacing(1), }, - cssRoot: { - color: theme.palette.getContrastText(purple[500]), - backgroundColor: purple[500], - '&:hover': { - backgroundColor: purple[700], - }, - }, - bootstrapRoot: { - boxShadow: 'none', - textTransform: 'none', - fontSize: 16, - padding: '6px 12px', - border: '1px solid', - lineHeight: 1.5, - backgroundColor: '#007bff', - borderColor: '#007bff', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - backgroundColor: '#0069d9', - borderColor: '#0062cc', - }, - '&:active': { - boxShadow: 'none', - backgroundColor: '#0062cc', - borderColor: '#005cbf', - }, - '&:focus': { - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', - }, - }, }), ); @@ -66,22 +77,17 @@ function CustomizedButtons() { return (
- + - +
); } diff --git a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx index d50f5ffc9f1a06..e3cdad3b061004 100644 --- a/docs/src/pages/demos/dialogs/CustomizedDialog.tsx +++ b/docs/src/pages/demos/dialogs/CustomizedDialog.tsx @@ -43,13 +43,13 @@ const DialogTitle = withStyles(styles)((props: DialogTitleProps) => { ); }); -const DialogContent = withStyles(theme => ({ +const DialogContent = withStyles((theme: Theme) => ({ root: { padding: theme.spacing(2), }, }))(MuiDialogContent); -const DialogActions = withStyles(theme => ({ +const DialogActions = withStyles((theme: Theme) => ({ root: { margin: 0, padding: theme.spacing(1), diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js index 3ec84239dd63e9..750b3f955f1e00 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.js @@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography'; const ExpansionPanel = withStyles({ root: { - border: '1px solid rgba(0,0,0,.125)', + border: '1px solid rgba(0, 0, 0, .125)', boxShadow: 'none', '&:not(:last-child)': { borderBottom: 0, @@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({ '&:before': { display: 'none', }, + '&$expanded': { + margin: 'auto', + }, }, - expanded: { - margin: 'auto', - }, + expanded: {}, })(MuiExpansionPanel); const ExpansionPanelSummary = withStyles({ root: { - backgroundColor: 'rgba(0,0,0,.03)', - borderBottom: '1px solid rgba(0,0,0,.125)', + backgroundColor: 'rgba(0, 0, 0, .03)', + borderBottom: '1px solid rgba(0, 0, 0, .125)', marginBottom: -1, minHeight: 56, '&$expanded': { @@ -45,72 +46,53 @@ const ExpansionPanelDetails = withStyles(theme => ({ }, }))(MuiExpansionPanelDetails); -class CustomizedExpansionPanel extends React.Component { - state = { - expanded: 'panel1', - }; +function CustomizedExpansionPanel() { + const [expanded, setExpanded] = React.useState('panel1'); - handleChange = panel => (event, expanded) => { - this.setState({ - expanded: expanded ? panel : false, - }); + const handleChange = panel => (event, newExpanded) => { + setExpanded(newExpanded ? panel : false); }; - render() { - const { expanded } = this.state; - return ( -
- - - Collapsible Group Item #1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #3 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); - } + return ( +
+ + + Collapsible Group Item #1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #3 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + +
+ ); } export default CustomizedExpansionPanel; diff --git a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx index b3d7d5ec285182..e8f59085b417d8 100644 --- a/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx +++ b/docs/src/pages/demos/expansion-panels/CustomizedExpansionPanel.tsx @@ -7,7 +7,7 @@ import Typography from '@material-ui/core/Typography'; const ExpansionPanel = withStyles({ root: { - border: '1px solid rgba(0,0,0,.125)', + border: '1px solid rgba(0, 0, 0, .125)', boxShadow: 'none', '&:not(:last-child)': { borderBottom: 0, @@ -15,16 +15,17 @@ const ExpansionPanel = withStyles({ '&:before': { display: 'none', }, + '&$expanded': { + margin: 'auto', + }, }, - expanded: { - margin: 'auto', - }, + expanded: {}, })(MuiExpansionPanel); const ExpansionPanelSummary = withStyles({ root: { - backgroundColor: 'rgba(0,0,0,.03)', - borderBottom: '1px solid rgba(0,0,0,.125)', + backgroundColor: 'rgba(0, 0, 0, .03)', + borderBottom: '1px solid rgba(0, 0, 0, .125)', marginBottom: -1, minHeight: 56, '&$expanded': { @@ -49,72 +50,53 @@ interface CustomizedExpansionPanelStates { expanded: string | boolean; } -class CustomizedExpansionPanel extends React.Component<{}, CustomizedExpansionPanelStates> { - state = { - expanded: 'panel1', - }; +function CustomizedExpansionPanel() { + const [expanded, setExpanded] = React.useState('panel1'); - handleChange = (panel: string) => (event: React.ChangeEvent<{}>, expanded: boolean) => { - this.setState({ - expanded: expanded ? panel : false, - }); + const handleChange = (panel: string) => (event: React.ChangeEvent<{}>, newExpanded: boolean) => { + setExpanded(newExpanded ? panel : false); }; - render() { - const { expanded } = this.state; - return ( -
- - - Collapsible Group Item #1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #3 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus - ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur - adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); - } + return ( +
+ + + Collapsible Group Item #1 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #2 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + + + + Collapsible Group Item #3 + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, + sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing + elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. + + + +
+ ); } export default CustomizedExpansionPanel; diff --git a/docs/src/pages/demos/progress/CustomizedProgress.js b/docs/src/pages/demos/progress/CustomizedProgress.js index 1dc8a6295d7608..a0c8233b06cd5a 100644 --- a/docs/src/pages/demos/progress/CustomizedProgress.js +++ b/docs/src/pages/demos/progress/CustomizedProgress.js @@ -1,93 +1,93 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles } from '@material-ui/core/styles'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; import { lighten } from '@material-ui/core/styles/colorManipulator'; import CircularProgress from '@material-ui/core/CircularProgress'; -import Paper from '@material-ui/core/Paper'; import LinearProgress from '@material-ui/core/LinearProgress'; -const styles = theme => ({ +const ColorCircularProgress = withStyles({ root: { - flexGrow: 1, - }, - progress: { - margin: theme.spacing(2), color: '#00695c', }, - linearColorPrimary: { +})(CircularProgress); + +const ColorLinearProgress = withStyles({ + colorPrimary: { backgroundColor: '#b2dfdb', }, - linearBarColorPrimary: { + barColorPrimary: { backgroundColor: '#00695c', }, - linearProgressDeterminate: { - margin: `${theme.spacing(1)}px auto 0`, +})(LinearProgress); + +const BorderLinearProgress = withStyles({ + root: { height: 10, backgroundColor: lighten('#ff6c5c', 0.5), }, - linearProgressDeterminateBar: { + bar: { borderRadius: 20, backgroundColor: '#ff6c5c', }, - // Reproduce the Facebook spinners. - facebook: { - margin: theme.spacing(2), +})(LinearProgress); + +// Inspired by the Facebook spinners. +const FacebookProgress = withStyles({ + root: { position: 'relative', }, - facebook1: { + top: { color: '#eef3fd', }, - facebook2: { + bottom: { color: '#6798e5', animationDuration: '550ms', position: 'absolute', left: 0, }, -}); +})(({ classes, ...props }) => ( +
+ + +
+)); -function CustomizedProgress(props) { - const { classes } = props; +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, + }, + margin: { + margin: theme.spacing(1), + }, +})); + +function CustomizedProgress() { + const classes = useStyles(); return ( - - - - + + + -
- - -
- + + ); } -CustomizedProgress.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedProgress); +export default CustomizedProgress; diff --git a/docs/src/pages/demos/progress/CustomizedProgress.tsx b/docs/src/pages/demos/progress/CustomizedProgress.tsx index b60ef8afd0eda6..5b6885cd8a2a7e 100644 --- a/docs/src/pages/demos/progress/CustomizedProgress.tsx +++ b/docs/src/pages/demos/progress/CustomizedProgress.tsx @@ -1,96 +1,95 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; +import { makeStyles, createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles'; import { lighten } from '@material-ui/core/styles/colorManipulator'; import CircularProgress from '@material-ui/core/CircularProgress'; -import Paper from '@material-ui/core/Paper'; import LinearProgress from '@material-ui/core/LinearProgress'; -const styles = (theme: Theme) => +const ColorCircularProgress = withStyles({ + root: { + color: '#00695c', + }, +})(CircularProgress); + +const ColorLinearProgress = withStyles({ + colorPrimary: { + backgroundColor: '#b2dfdb', + }, + barColorPrimary: { + backgroundColor: '#00695c', + }, +})(LinearProgress); + +const BorderLinearProgress = withStyles({ + root: { + height: 10, + backgroundColor: lighten('#ff6c5c', 0.5), + }, + bar: { + borderRadius: 20, + backgroundColor: '#ff6c5c', + }, +})(LinearProgress); + +// Inspired by the Facebook spinners. +const FacebookProgress = withStyles({ + root: { + position: 'relative', + }, + top: { + color: '#eef3fd', + }, + bottom: { + color: '#6798e5', + animationDuration: '550ms', + position: 'absolute', + left: 0, + }, +})(({ classes, ...props }: any) => ( +
+ + +
+)); + +const useStyles = makeStyles((theme: Theme) => createStyles({ root: { flexGrow: 1, }, - progress: { - margin: theme.spacing(2), - color: '#00695c', - }, - linearColorPrimary: { - backgroundColor: '#b2dfdb', - }, - linearBarColorPrimary: { - backgroundColor: '#00695c', - }, - linearProgressDeterminate: { - margin: `${theme.spacing(1)}px auto 0`, - height: 10, - backgroundColor: lighten('#ff6c5c', 0.5), + margin: { + margin: theme.spacing(1), }, - linearProgressDeterminateBar: { - borderRadius: 20, - backgroundColor: '#ff6c5c', - }, - // Reproduce the Facebook spinners. - facebook: { - margin: theme.spacing(2), - position: 'relative', - }, - facebook1: { - color: '#eef3fd', - }, - facebook2: { - color: '#6798e5', - animationDuration: '550ms', - position: 'absolute', - left: 0, - }, - }); + }), +); -export type Props = WithStyles; - -function CustomizedProgress(props: Props) { - const { classes } = props; +function CustomizedProgress() { + const classes = useStyles(); return ( - - - - + + + -
- - -
- + + ); } -CustomizedProgress.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedProgress); +export default CustomizedProgress; diff --git a/docs/src/pages/demos/selects/CustomizedSelects.js b/docs/src/pages/demos/selects/CustomizedSelects.js index dafda903e494d2..b3db9a9e4c73b7 100644 --- a/docs/src/pages/demos/selects/CustomizedSelects.js +++ b/docs/src/pages/demos/selects/CustomizedSelects.js @@ -51,9 +51,6 @@ const useStyles = makeStyles(theme => ({ margin: { margin: theme.spacing(1), }, - bootstrapFormLabel: { - fontSize: 18, - }, })); function CustomizedSelects() { @@ -65,15 +62,11 @@ function CustomizedSelects() { return (
- - Age - + Age - - Age - + Age - - Age - + Age ({ +const StyledTableCell = withStyles(theme => ({ head: { backgroundColor: theme.palette.common.black, color: theme.palette.common.white, @@ -18,21 +17,13 @@ const CustomTableCell = withStyles(theme => ({ }, }))(TableCell); -const styles = theme => ({ +const StyledTableRow = withStyles(theme => ({ root: { - width: '100%', - marginTop: theme.spacing(3), - overflowX: 'auto', - }, - table: { - minWidth: 700, - }, - row: { '&:nth-of-type(odd)': { backgroundColor: theme.palette.background.default, }, }, -}); +}))(TableRow); function createData(name, calories, fat, carbs, protein) { return { name, calories, fat, carbs, protein }; @@ -46,32 +37,43 @@ const rows = [ createData('Gingerbread', 356, 16.0, 49, 3.9), ]; -function CustomizedTable(props) { - const { classes } = props; +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, +})); + +function CustomizedTable() { + const classes = useStyles(); return ( - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) {rows.map(row => ( - - + + {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + ))}
@@ -79,8 +81,4 @@ function CustomizedTable(props) { ); } -CustomizedTable.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedTable); +export default CustomizedTable; diff --git a/docs/src/pages/demos/tables/CustomizedTable.tsx b/docs/src/pages/demos/tables/CustomizedTable.tsx index 1d2772a9fb9e5e..fade60e3cd0b7f 100644 --- a/docs/src/pages/demos/tables/CustomizedTable.tsx +++ b/docs/src/pages/demos/tables/CustomizedTable.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles'; +import { withStyles, Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; @@ -8,7 +7,7 @@ import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; -const CustomTableCell = withStyles((theme: Theme) => +const StyledTableCell = withStyles((theme: Theme) => createStyles({ head: { backgroundColor: theme.palette.common.black, @@ -20,22 +19,15 @@ const CustomTableCell = withStyles((theme: Theme) => }), )(TableCell); -const styles = (theme: Theme) => +const StyledTableRow = withStyles((theme: Theme) => createStyles({ root: { - width: '100%', - marginTop: theme.spacing(3), - overflowX: 'auto', - }, - table: { - minWidth: 700, - }, - row: { '&:nth-of-type(odd)': { backgroundColor: theme.palette.background.default, }, }, - }); + }), +)(TableRow); function createData(name: string, calories: number, fat: number, carbs: number, protein: number) { return { name, calories, fat, carbs, protein }; @@ -49,34 +41,45 @@ const rows = [ createData('Gingerbread', 356, 16.0, 49, 3.9), ]; -export interface CustomizedTableProps extends WithStyles {} +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + marginTop: theme.spacing(3), + overflowX: 'auto', + }, + table: { + minWidth: 700, + }, + }), +); -function CustomizedTable(props: CustomizedTableProps) { - const { classes } = props; +function CustomizedTable() { + const classes = useStyles(); return ( - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) + Dessert (100g serving) + Calories + Fat (g) + Carbs (g) + Protein (g) {rows.map(row => ( - - + + {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - + + {row.calories} + {row.fat} + {row.carbs} + {row.protein} + ))}
@@ -84,8 +87,4 @@ function CustomizedTable(props: CustomizedTableProps) { ); } -CustomizedTable.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedTable); +export default CustomizedTable; diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.js b/docs/src/pages/demos/tabs/CustomizedTabs.js index e02c76f68f6cdc..965d3d9690821b 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.js +++ b/docs/src/pages/demos/tabs/CustomizedTabs.js @@ -17,60 +17,72 @@ const StyledTabs = withStyles({ }, })(props => }} />); -const StyledTab = withStyles(theme => ({ - root: { - textTransform: 'none', - color: '#fff', - fontWeight: theme.typography.fontWeightRegular, - fontSize: theme.typography.pxToRem(15), - marginRight: theme.spacing(1), - }, -}))(props => ); +const StyledTab = withStyles(theme => + makeStyles({ + root: { + textTransform: 'none', + color: '#fff', + fontWeight: theme.typography.fontWeightRegular, + fontSize: theme.typography.pxToRem(15), + marginRight: theme.spacing(1), + }, + }), +)(props => ); -const useStyles = makeStyles(theme => ({ +const AntTabs = withStyles({ root: { - flexGrow: 1, - backgroundColor: theme.palette.background.paper, - }, - tabsRoot: { borderBottom: '1px solid #e8e8e8', }, - tabsIndicator: { + indicator: { backgroundColor: '#1890ff', }, - tabRoot: { - textTransform: 'none', - minWidth: 72, - fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing(4), - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - color: '#40a9ff', - opacity: 1, - }, - '&$tabSelected': { - color: '#1890ff', - fontWeight: theme.typography.fontWeightMedium, - }, - '&:focus': { - color: '#40a9ff', +})(Tabs); + +const AntTab = withStyles(theme => + makeStyles({ + root: { + textTransform: 'none', + minWidth: 72, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(4), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&$selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#40a9ff', + }, }, + selected: {}, + }), +)(props => ); + +const useStyles = makeStyles(theme => ({ + root: { + flexGrow: 1, }, - tabSelected: {}, typography: { padding: theme.spacing(3), }, + demo1: { + backgroundColor: theme.palette.background.paper, + }, demo2: { backgroundColor: '#2e1534', }, @@ -86,28 +98,14 @@ function CustomizedTabs() { return (
- - - - - - Ant Design UI powered by Material-UI +
+ + + + + + +
diff --git a/docs/src/pages/demos/tabs/CustomizedTabs.tsx b/docs/src/pages/demos/tabs/CustomizedTabs.tsx index 06a75876478e27..f3a28f11e292a8 100644 --- a/docs/src/pages/demos/tabs/CustomizedTabs.tsx +++ b/docs/src/pages/demos/tabs/CustomizedTabs.tsx @@ -27,7 +27,7 @@ interface StyledTabProps { } const StyledTab = withStyles((theme: Theme) => - createStyles({ + makeStyles({ root: { textTransform: 'none', color: '#fff', @@ -38,54 +38,66 @@ const StyledTab = withStyles((theme: Theme) => }), )((props: StyledTabProps) => ); -const useStyles = makeStyles((theme: Theme) => ({ +const AntTabs = withStyles({ root: { - flexGrow: 1, - backgroundColor: theme.palette.background.paper, - }, - tabsRoot: { borderBottom: '1px solid #e8e8e8', }, - tabsIndicator: { + indicator: { backgroundColor: '#1890ff', }, - tabRoot: { - textTransform: 'none', - minWidth: 72, - fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing(4), - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - color: '#40a9ff', - opacity: 1, +})(Tabs); + +const AntTab = withStyles((theme: Theme) => + makeStyles({ + root: { + textTransform: 'none', + minWidth: 72, + fontWeight: theme.typography.fontWeightRegular, + marginRight: theme.spacing(4), + fontFamily: [ + '-apple-system', + 'BlinkMacSystemFont', + '"Segoe UI"', + 'Roboto', + '"Helvetica Neue"', + 'Arial', + 'sans-serif', + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(','), + '&:hover': { + color: '#40a9ff', + opacity: 1, + }, + '&$selected': { + color: '#1890ff', + fontWeight: theme.typography.fontWeightMedium, + }, + '&:focus': { + color: '#40a9ff', + }, + }, + selected: {}, + }), +)((props: StyledTabProps) => ); + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + flexGrow: 1, }, - '&$tabSelected': { - color: '#1890ff', - fontWeight: theme.typography.fontWeightMedium, + typography: { + padding: theme.spacing(3), }, - '&:focus': { - color: '#40a9ff', + demo1: { + backgroundColor: theme.palette.background.paper, }, - }, - tabSelected: {}, - typography: { - padding: theme.spacing(3), - }, - demo2: { - backgroundColor: '#2e1534', - }, -})); + demo2: { + backgroundColor: '#2e1534', + }, + }), +); function CustomizedTabs() { const classes = useStyles(); @@ -97,28 +109,14 @@ function CustomizedTabs() { return (
- - - - - - Ant Design UI powered by Material-UI +
+ + + + + + +
diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.js b/docs/src/pages/demos/text-fields/CustomizedInputs.js index 51ebd0598eed51..2687b0051a74b4 100644 --- a/docs/src/pages/demos/text-fields/CustomizedInputs.js +++ b/docs/src/pages/demos/text-fields/CustomizedInputs.js @@ -1,48 +1,42 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import { withStyles, createMuiTheme } from '@material-ui/core/styles'; +import { withStyles, makeStyles, createMuiTheme } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; -import Input from '@material-ui/core/Input'; import InputBase from '@material-ui/core/InputBase'; import { fade } from '@material-ui/core/styles/colorManipulator'; import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; -import FilledInput from '@material-ui/core/FilledInput'; -import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const styles = theme => ({ +const CssTextField = withStyles({ root: { - display: 'flex', - flexWrap: 'wrap', - }, - margin: { - margin: theme.spacing(1), - }, - cssLabel: { - '&$cssFocused': { - color: purple[500], + '& .MuiInputLabel.focused': { + color: 'green', }, - }, - cssFocused: {}, - cssUnderline: { - '&:after': { - borderBottomColor: purple[500], + '& .MuiInput-underline:after': { + borderBottomColor: 'green', }, - }, - cssOutlinedInput: { - '&$cssFocused $notchedOutline': { - borderColor: purple[500], + '& .MuiOutlinedInput': { + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'red', + }, + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: 'yellow', + }, + '&.focused .MuiOutlinedInput-notchedOutline': { + borderColor: 'green', + }, }, }, - notchedOutline: {}, - bootstrapRoot: { +})(TextField); + +const BootstrapInput = withStyles(theme => ({ + root: { 'label + &': { marginTop: theme.spacing(3), }, }, - bootstrapInput: { + input: { borderRadius: 4, position: 'relative', backgroundColor: theme.palette.common.white, @@ -69,10 +63,10 @@ const styles = theme => ({ borderColor: theme.palette.primary.main, }, }, - bootstrapFormLabel: { - fontSize: 18, - }, - redditRoot: { +}))(InputBase); + +const RedditTextField = withStyles(theme => ({ + root: { border: '1px solid #e2e2e1', overflow: 'hidden', borderRadius: 4, @@ -81,13 +75,26 @@ const styles = theme => ({ '&:hover': { backgroundColor: '#fff', }, - '&.focused': { + '&$focused': { backgroundColor: '#fff', boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`, borderColor: theme.palette.primary.main, }, }, -}); + focused: {}, +}))(({ classes, ...props }) => ( + +)); + +const useStyles = makeStyles(theme => ({ + root: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(1), + }, +})); const theme = createMuiTheme({ palette: { @@ -95,43 +102,14 @@ const theme = createMuiTheme({ }, }); -function CustomizedInputs(props) { - const { classes } = props; +function CustomizedInputs() { + const classes = useStyles(); return (
- - - Custom CSS - - - - + - + Bootstrap - - - - Reddit - + +
); } -CustomizedInputs.propTypes = { - classes: PropTypes.object.isRequired, -}; - -export default withStyles(styles)(CustomizedInputs); +export default CustomizedInputs; diff --git a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx index 26bf7ffb971296..e7fa32773f99c7 100644 --- a/docs/src/pages/demos/text-fields/CustomizedInputs.tsx +++ b/docs/src/pages/demos/text-fields/CustomizedInputs.tsx @@ -1,55 +1,49 @@ import React from 'react'; -import PropTypes from 'prop-types'; import { createStyles, Theme, withStyles, - WithStyles, + makeStyles, createMuiTheme, } from '@material-ui/core/styles'; import { ThemeProvider } from '@material-ui/styles'; -import Input from '@material-ui/core/Input'; import InputBase from '@material-ui/core/InputBase'; import { fade } from '@material-ui/core/styles/colorManipulator'; import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; -import FilledInput from '@material-ui/core/FilledInput'; -import purple from '@material-ui/core/colors/purple'; import green from '@material-ui/core/colors/green'; -const styles = (theme: Theme) => - createStyles({ - root: { - display: 'flex', - flexWrap: 'wrap', +const CssTextField = withStyles({ + root: { + '& .MuiInputLabel.focused': { + color: 'green', }, - margin: { - margin: theme.spacing(1), + '& .MuiInput-underline:after': { + borderBottomColor: 'green', }, - cssLabel: { - '&$cssFocused': { - color: purple[500], + '& .MuiOutlinedInput': { + '& .MuiOutlinedInput-notchedOutline': { + borderColor: 'red', }, - }, - cssFocused: {}, - cssUnderline: { - '&:after': { - borderBottomColor: purple[500], + '&:hover .MuiOutlinedInput-notchedOutline': { + borderColor: 'yellow', }, - }, - cssOutlinedInput: { - '&$cssFocused $notchedOutline': { - borderColor: purple[500], + '&.focused .MuiOutlinedInput-notchedOutline': { + borderColor: 'green', }, }, - notchedOutline: {}, - bootstrapRoot: { + }, +})(TextField); + +const BootstrapInput = withStyles((theme: Theme) => + createStyles({ + root: { 'label + &': { marginTop: theme.spacing(3), }, }, - bootstrapInput: { + input: { borderRadius: 4, position: 'relative', backgroundColor: theme.palette.common.white, @@ -76,10 +70,12 @@ const styles = (theme: Theme) => borderColor: theme.palette.primary.main, }, }, - bootstrapFormLabel: { - fontSize: 18, - }, - redditRoot: { + }), +)(InputBase); + +const RedditTextField = withStyles((theme: Theme) => + createStyles({ + root: { border: '1px solid #e2e2e1', overflow: 'hidden', borderRadius: 4, @@ -88,13 +84,29 @@ const styles = (theme: Theme) => '&:hover': { backgroundColor: '#fff', }, - '&.focused': { + '&$focused': { backgroundColor: '#fff', boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 2px`, borderColor: theme.palette.primary.main, }, }, - }); + focused: {}, + }), +)(({ classes, ...props }: any) => ( + +)); + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + display: 'flex', + flexWrap: 'wrap', + }, + margin: { + margin: theme.spacing(1), + }, + }), +); const theme = createMuiTheme({ palette: { @@ -102,45 +114,14 @@ const theme = createMuiTheme({ }, }); -export interface Props extends WithStyles {} - -function CustomizedInputs(props: Props) { - const { classes } = props; +function CustomizedInputs() { + const classes = useStyles(); return (
- - - Custom CSS - - - - + - + Bootstrap - - - - Reddit - + +
); } -CustomizedInputs.propTypes = { - classes: PropTypes.object.isRequired, -} as any; - -export default withStyles(styles)(CustomizedInputs); +export default CustomizedInputs; diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.js b/docs/src/pages/demos/tooltips/CustomizedTooltips.js index 60b3700208b194..6829ad170162fe 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.js +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.js @@ -1,5 +1,5 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { withStyles, makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; @@ -51,49 +51,122 @@ function arrowGenerator(color) { }; } -const useStyles = makeStyles(theme => ({ - button: { - margin: theme.spacing(1), - }, - lightTooltip: { +const LightTooltip = withStyles(theme => ({ + tooltip: { backgroundColor: theme.palette.common.white, color: 'rgba(0, 0, 0, 0.87)', boxShadow: theme.shadows[1], fontSize: 11, }, - arrowPopper: arrowGenerator(theme.palette.grey[700]), - arrow: { - position: 'absolute', - fontSize: 6, - width: '3em', - height: '3em', - '&::before': { - content: '""', - margin: 'auto', - display: 'block', - width: 0, - height: 0, - borderStyle: 'solid', +}))(Tooltip); + +const ArrowTooltip = withStyles(theme => + makeStyles({ + arrow: { + position: 'absolute', + fontSize: 6, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, }, - }, - bootstrapPopper: arrowGenerator(theme.palette.common.black), - bootstrapTooltip: { - backgroundColor: theme.palette.common.black, - }, - bootstrapPlacementLeft: { - margin: '0 8px', - }, - bootstrapPlacementRight: { - margin: '0 8px', - }, - bootstrapPlacementTop: { - margin: '8px 0', - }, - bootstrapPlacementBottom: { - margin: '8px 0', - }, - htmlPopper: arrowGenerator('#dadde9'), - htmlTooltip: { + popper: arrowGenerator(theme.palette.grey[700]), + }), +)(({ classes: { arrow, ...classes }, title, ...props }) => { + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {title} + + + } + classes={classes} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, + }, + }, + }, + }} + {...props} + /> + ); +}); + +const BootstrapTooltip = withStyles(theme => + makeStyles({ + arrow: { + position: 'absolute', + fontSize: 6, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, + }, + popper: arrowGenerator(theme.palette.common.black), + tooltip: { + backgroundColor: theme.palette.common.black, + }, + tooltipPlacementLeft: { + margin: '0 8px', + }, + tooltipPlacementRight: { + margin: '0 8px', + }, + tooltipPlacementTop: { + margin: '8px 0', + }, + tooltipPlacementBottom: { + margin: '8px 0', + }, + }), +)(({ classes: { arrow, ...classes }, title, ...props }) => { + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {title} + + + } + classes={classes} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, + }, + }, + }, + }} + {...props} + /> + ); +}); + +const HtmlTooltip = withStyles(theme => ({ + tooltip: { backgroundColor: '#f5f5f9', color: 'rgba(0, 0, 0, 0.87)', maxWidth: 220, @@ -103,92 +176,31 @@ const useStyles = makeStyles(theme => ({ fontWeight: theme.typography.fontWeightMedium, }, }, -})); +}))(Tooltip); function CustomizedTooltips() { - const classes = useStyles(); - const [arrowRef, setArrowRef] = React.useState(null); - return (
- - - - - Add - - - } - classes={{ popper: classes.arrowPopper }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - - Add - - - } - classes={{ - tooltip: classes.bootstrapTooltip, - popper: classes.bootstrapPopper, - tooltipPlacementLeft: classes.bootstrapPlacementLeft, - tooltipPlacementRight: classes.bootstrapPlacementRight, - tooltipPlacementTop: classes.bootstrapPlacementTop, - tooltipPlacementBottom: classes.bootstrapPlacementBottom, - }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - + + + + + + + + + Tooltip with HTML {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} - } > - - + +
); } diff --git a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx index 6c3262042d963e..022d3bb461bd5e 100644 --- a/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx +++ b/docs/src/pages/demos/tooltips/CustomizedTooltips.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { withStyles, Theme, makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; @@ -51,18 +51,62 @@ function arrowGenerator(color: string) { }; } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - button: { - margin: theme.spacing(1), - }, - lightTooltip: { - backgroundColor: theme.palette.common.white, - color: 'rgba(0, 0, 0, 0.87)', - boxShadow: theme.shadows[1], - fontSize: 11, +const LightTooltip = withStyles((theme: Theme) => ({ + tooltip: { + backgroundColor: theme.palette.common.white, + color: 'rgba(0, 0, 0, 0.87)', + boxShadow: theme.shadows[1], + fontSize: 11, + }, +}))(Tooltip); + +const ArrowTooltip = withStyles((theme: Theme) => + makeStyles({ + arrow: { + position: 'absolute', + fontSize: 6, + width: '3em', + height: '3em', + '&::before': { + content: '""', + margin: 'auto', + display: 'block', + width: 0, + height: 0, + borderStyle: 'solid', + }, }, - arrowPopper: arrowGenerator(theme.palette.grey[700]), + popper: arrowGenerator(theme.palette.grey[700]), + }), +)(({ classes: { arrow, ...classes }, title, ...props }: any) => { + const [arrowRef, setArrowRef] = React.useState(null); + + return ( + + {title} + + + } + classes={classes} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, + }, + }, + }, + }} + {...props} + /> + ); +}); + +const BootstrapTooltip = withStyles((theme: Theme) => + makeStyles({ arrow: { position: 'absolute', fontSize: 6, @@ -77,120 +121,86 @@ const useStyles = makeStyles((theme: Theme) => borderStyle: 'solid', }, }, - bootstrapPopper: arrowGenerator(theme.palette.common.black), - bootstrapTooltip: { + popper: arrowGenerator(theme.palette.common.black), + tooltip: { backgroundColor: theme.palette.common.black, }, - bootstrapPlacementLeft: { + tooltipPlacementLeft: { margin: '0 8px', }, - bootstrapPlacementRight: { + tooltipPlacementRight: { margin: '0 8px', }, - bootstrapPlacementTop: { + tooltipPlacementTop: { margin: '8px 0', }, - bootstrapPlacementBottom: { + tooltipPlacementBottom: { margin: '8px 0', }, - htmlPopper: arrowGenerator('#dadde9'), - htmlTooltip: { - backgroundColor: '#f5f5f9', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: 220, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - '& b': { - fontWeight: theme.typography.fontWeightMedium, - }, - }, }), -); - -function CustomizedTooltips() { - const classes = useStyles(); +)(({ classes: { arrow, ...classes }, title, ...props }: any) => { const [arrowRef, setArrowRef] = React.useState(null); return ( -
- - - - - Add - - - } - classes={{ popper: classes.arrowPopper }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - - Add - - - } - classes={{ - tooltip: classes.bootstrapTooltip, - popper: classes.bootstrapPopper, - tooltipPlacementLeft: classes.bootstrapPlacementLeft, - tooltipPlacementRight: classes.bootstrapPlacementRight, - tooltipPlacementTop: classes.bootstrapPlacementTop, - tooltipPlacementBottom: classes.bootstrapPlacementBottom, - }} - PopperProps={{ - popperOptions: { - modifiers: { - arrow: { - enabled: Boolean(arrowRef), - element: arrowRef, - }, - }, - }, - }} - > - - - + {title} + + + } + classes={classes} + PopperProps={{ + popperOptions: { + modifiers: { + arrow: { + enabled: Boolean(arrowRef), + element: arrowRef, }, }, - }} + }, + }} + {...props} + /> + ); +}); + +const HtmlTooltip = withStyles((theme: Theme) => ({ + tooltip: { + backgroundColor: '#f5f5f9', + color: 'rgba(0, 0, 0, 0.87)', + maxWidth: 220, + fontSize: theme.typography.pxToRem(12), + border: '1px solid #dadde9', + '& b': { + fontWeight: theme.typography.fontWeightMedium, + }, + }, +}))(Tooltip); + +function CustomizedTooltips() { + return ( +
+ + + + + + + + + + Tooltip with HTML {"And here's"} {'some'} {'amazing content'}.{' '} {"It's very engaging. Right?"} - } > - - + +
); } diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js index 88c41af16a8c1f..4b5b6c69274ef6 100644 --- a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js +++ b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.js @@ -51,7 +51,7 @@ function ThemeProvider(props) { const theme = React.useMemo(() => { const output = outerTheme === null ? localTheme : mergeOuterLocalTheme(outerTheme, localTheme); - if (outerTheme !== null) { + if (outerTheme !== null && output) { output[nested] = true; } diff --git a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js index d9afc7ff6b6274..72a095155999c1 100644 --- a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js +++ b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.js @@ -12,7 +12,9 @@ function safePrefix(classNamePrefix) { * pseudo classes (:checked, :disabled, :focused, etc.). * * Why do they exist in the first place? - * These classes are used for styling the dynamic states of the components. + * These classes are used at a specificity of 2. + * It allows them to override previously definied styles as well as + * being untouched by simple user overrides. */ const pseudoClasses = [ 'checked', @@ -21,6 +23,7 @@ const pseudoClasses = [ 'focused', 'focusVisible', 'required', + 'expanded', 'selected', ]; @@ -31,24 +34,29 @@ const pseudoClasses = [ // It's inspired by // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js export default function createGenerateClassName(options = {}) { - const { productionPrefix = 'jss', seed = '' } = options; + const { disableGlobal = false, productionPrefix = 'jss', seed = '' } = options; let ruleCounter = 0; return (rule, styleSheet) => { - const isStatic = - !styleSheet.options.link && styleSheet.options.name && !styleSheet.options.theme[nested]; - const prefix = isStatic ? safePrefix(styleSheet.options.name) : null; + const isGlobal = + !styleSheet.options.link && + styleSheet.options.name && + styleSheet.options.name.indexOf('Mui') === 0 && + !disableGlobal; - if (isStatic && rule.key === 'root') { - return prefix; - } + if (isGlobal) { + if (pseudoClasses.indexOf(rule.key) !== -1) { + return rule.key; + } - if (isStatic && pseudoClasses.indexOf(rule.key) !== -1) { - return rule.key; - } + if (!styleSheet.options.theme[nested]) { + const prefix = `${safePrefix(styleSheet.options.name)}${seed}`; - if (isStatic) { - return `${prefix}-${rule.key}`; + if (rule.key === 'root') { + return prefix; + } + return `${prefix}-${rule.key}`; + } } ruleCounter += 1; diff --git a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js index 6ca9bc09b27258..e3116dbc981b3a 100644 --- a/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js +++ b/packages/material-ui-styles/src/createGenerateClassName/createGenerateClassName.test.js @@ -1,11 +1,11 @@ import { assert } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import createGenerateClassName from './createGenerateClassName'; +import { nested } from '../ThemeProvider/ThemeProvider'; describe('createGenerateClassName', () => { - const generateClassName = createGenerateClassName(); - it('should generate a class name', () => { + const generateClassName = createGenerateClassName(); assert.strictEqual( generateClassName( { @@ -22,7 +22,8 @@ describe('createGenerateClassName', () => { ); }); - it('should increase the counter only when needed', () => { + it('should increase the counter', () => { + const generateClassName = createGenerateClassName(); assert.strictEqual( generateClassName( { @@ -30,12 +31,11 @@ describe('createGenerateClassName', () => { }, { options: { - theme: {}, classNamePrefix: 'classNamePrefix', }, }, ), - 'classNamePrefix-key-2', + 'classNamePrefix-key-1', ); assert.strictEqual( generateClassName( @@ -44,42 +44,55 @@ describe('createGenerateClassName', () => { }, { options: { - link: true, classNamePrefix: 'classNamePrefix', }, }, ), - 'classNamePrefix-key-3', + 'classNamePrefix-key-2', ); + }); + + it('should work without a classNamePrefix', () => { + const generateClassName = createGenerateClassName(); assert.strictEqual( generateClassName( + { key: 'root' }, { - key: 'key', + options: {}, }, + ), + 'root-1', + ); + }); + + it('should generate global class names', () => { + const generateClassName = createGenerateClassName(); + assert.strictEqual( + generateClassName( + { key: 'root' }, { options: { - link: true, - classNamePrefix: 'classNamePrefix', + name: 'MuiButton', + theme: {}, }, }, ), - 'classNamePrefix-key-4', + 'MuiButton', ); - }); - - describe('classNamePrefix', () => { - it('should work without a classNamePrefix', () => { - const generateClassName2 = createGenerateClassName(); - assert.strictEqual( - generateClassName2( - { key: 'root' }, - { - options: {}, + assert.strictEqual( + generateClassName( + { key: 'root' }, + { + options: { + name: 'MuiButton', + theme: { + [nested]: true, + }, }, - ), - 'root-1', - ); - }); + }, + ), + 'root-1', + ); }); describe('production', () => { @@ -103,13 +116,31 @@ describe('createGenerateClassName', () => { }); it('should output a short representation', () => { - const rule = { key: 'root' }; - const styleSheet = { - rules: { raw: {} }, - options: {}, - }; - const generateClassName2 = createGenerateClassName(); - assert.strictEqual(generateClassName2(rule, styleSheet), 'jss1'); + const generateClassName = createGenerateClassName(); + assert.strictEqual( + generateClassName( + { key: 'root' }, + { + options: {}, + }, + ), + 'jss1', + ); + }); + + it('should disable the minification', () => { + const generateClassName = createGenerateClassName({ + productionPrefix: '', + }); + assert.strictEqual( + generateClassName( + { key: 'root' }, + { + options: {}, + }, + ), + 'root-1', + ); }); }); }); diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js index 60ec3969b3c625..e9116090acfbf2 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.test.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.test.js @@ -238,10 +238,10 @@ describe('makeStyles', () => { , ); assert.strictEqual(sheetsRegistry.registry.length, 1); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'mui-text-field' }); + assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' }); wrapper.setProps({ theme: createMuiTheme({ foo: 'bar' }) }); assert.strictEqual(sheetsRegistry.registry.length, 1); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'mui-text-field' }); + assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' }); }); it('should support the overrides key', () => { diff --git a/packages/material-ui-styles/src/withStyles/withStyles.test.js b/packages/material-ui-styles/src/withStyles/withStyles.test.js index fc8629751cad3e..1437bf3d1154ec 100644 --- a/packages/material-ui-styles/src/withStyles/withStyles.test.js +++ b/packages/material-ui-styles/src/withStyles/withStyles.test.js @@ -190,10 +190,10 @@ describe('withStyles', () => { , ); assert.strictEqual(sheetsRegistry.registry.length, 1); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'mui-text-field' }); + assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' }); wrapper.setProps({ theme: createMuiTheme({ foo: 'bar' }) }); assert.strictEqual(sheetsRegistry.registry.length, 1); - assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'mui-text-field' }); + assert.deepEqual(sheetsRegistry.registry[0].classes, { root: 'MuiTextField' }); }); it('should support the overrides key', () => { diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js index dfe05f2e10af03..75a5984c198fac 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbCollapsed.js @@ -46,4 +46,4 @@ BreadcrumbCollapsed.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles, { name: 'MuiPrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed); +export default withStyles(styles, { name: 'PrivateBreadcrumbCollapsed' })(BreadcrumbCollapsed); diff --git a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js index 77cab30b4604f1..0161e762168c97 100644 --- a/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js +++ b/packages/material-ui/src/Breadcrumbs/BreadcrumbSeparator.js @@ -31,4 +31,4 @@ BreadcrumbSeparator.propTypes = { className: PropTypes.string, }; -export default withStyles(styles, { name: 'MuiPrivateBreadcrumbSeparator' })(BreadcrumbSeparator); +export default withStyles(styles, { name: 'PrivateBreadcrumbSeparator' })(BreadcrumbSeparator); diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js index 0add2e7e3da364..2589ac46a5bbfc 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js @@ -34,6 +34,18 @@ export const styles = theme => { display: 'none', }, }, + '&$expanded': { + margin: '16px 0', + '&:first-child': { + marginTop: 0, + }, + '&:last-child': { + marginBottom: 0, + }, + '&:before': { + opacity: 0, + }, + }, '&$expanded + &': { '&:before': { display: 'none', @@ -58,18 +70,7 @@ export const styles = theme => { }, }, /* Styles applied to the root element if `expanded={true}`. */ - expanded: { - margin: '16px 0', - '&:first-child': { - marginTop: 0, - }, - '&:last-child': { - marginBottom: 0, - }, - '&:before': { - opacity: 0, - }, - }, + expanded: {}, /* Styles applied to the root element if `disabled={true}`. */ disabled: { backgroundColor: theme.palette.action.disabledBackground, diff --git a/packages/material-ui/src/Hidden/HiddenCss.js b/packages/material-ui/src/Hidden/HiddenCss.js index e2ded222517865..a42a838051e5f3 100644 --- a/packages/material-ui/src/Hidden/HiddenCss.js +++ b/packages/material-ui/src/Hidden/HiddenCss.js @@ -152,4 +152,4 @@ HiddenCss.propTypes = { xsUp: PropTypes.bool, }; -export default withStyles(styles, { name: 'MuiPrivateHiddenCss' })(HiddenCss); +export default withStyles(styles, { name: 'PrivateHiddenCss' })(HiddenCss); diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js index 7b0139905c5bf9..52183011d9e845 100644 --- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js +++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js @@ -118,6 +118,6 @@ NotchedOutline.propTypes = { theme: PropTypes.object, }; -export default withStyles(styles, { name: 'MuiPrivateNotchedOutline', withTheme: true })( +export default withStyles(styles, { name: 'PrivateNotchedOutline', withTheme: true })( NotchedOutline, ); diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js index 75635c6155b1b0..5baa0e74c6eb41 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeArea.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeArea.js @@ -70,4 +70,4 @@ SwipeArea.propTypes = { width: PropTypes.number.isRequired, }; -export default withStyles(styles, { name: 'MuiPrivateSwipeArea' })(SwipeArea); +export default withStyles(styles, { name: 'PrivateSwipeArea' })(SwipeArea); diff --git a/packages/material-ui/src/Tabs/TabIndicator.js b/packages/material-ui/src/Tabs/TabIndicator.js index f8b0e260b60755..9d92a56e3316d2 100644 --- a/packages/material-ui/src/Tabs/TabIndicator.js +++ b/packages/material-ui/src/Tabs/TabIndicator.js @@ -55,4 +55,4 @@ TabIndicator.propTypes = { color: PropTypes.oneOf(['primary', 'secondary']), }; -export default withStyles(styles, { name: 'MuiPrivateTabIndicator' })(TabIndicator); +export default withStyles(styles, { name: 'PrivateTabIndicator' })(TabIndicator); diff --git a/packages/material-ui/src/Tabs/TabScrollButton.js b/packages/material-ui/src/Tabs/TabScrollButton.js index d033b478d8d222..1e489439a3996f 100644 --- a/packages/material-ui/src/Tabs/TabScrollButton.js +++ b/packages/material-ui/src/Tabs/TabScrollButton.js @@ -62,4 +62,4 @@ TabScrollButton.defaultProps = { visible: true, }; -export default withStyles(styles, { name: 'MuiPrivateTabScrollButton' })(TabScrollButton); +export default withStyles(styles, { name: 'PrivateTabScrollButton' })(TabScrollButton); diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js index a23f327ec1568e..2e9c5092e91713 100644 --- a/packages/material-ui/src/internal/SwitchBase.js +++ b/packages/material-ui/src/internal/SwitchBase.js @@ -236,6 +236,6 @@ SwitchBase.propTypes = { value: PropTypes.any, }; -export default withStyles(styles, { name: 'MuiPrivateSwitchBase' })( +export default withStyles(styles, { name: 'PrivateSwitchBase' })( withFormControlContext(SwitchBase), );