[core] Remove withStyles dependencies from `@material-ui/core/style…

…s` (#26277)
mui · May 17, 2021 · 2eb9430 · 2eb9430
1 parent 5d3d907
commit 2eb9430
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 194 deletions.
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createTheme, ThemeProvider, withStyles } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
@@ -228,4 +229,4 @@ Paperbase.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(Paperbase);
+export default withStyles(styles, { defaultTheme: theme })(Paperbase);
diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react';
-import {
-  createTheme,
-  ThemeProvider,
-  withStyles,
-  WithStyles,
-} from '@material-ui/core/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { withStyles, WithStyles } from '@material-ui/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Typography from '@material-ui/core/Typography';
@@ -229,4 +225,4 @@ function Paperbase(props: PaperbaseProps) {
   );
 }
 
-export default withStyles(styles)(Paperbase);
+export default withStyles(styles, { defaultTheme: theme })(Paperbase);
diff --git a/docs/src/pages/styles/api/api.md b/docs/src/pages/styles/api/api.md
@@ -319,7 +319,7 @@ Some implementation details that might be interesting to being aware of:
 
 ```jsx
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {
@@ -338,7 +338,7 @@ Also, you can use as [decorators](https://babeljs.io/docs/en/babel-plugin-propos
 
 ```jsx
 import * as React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 
 const styles = {
   root: {

diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md
@@ -100,7 +100,7 @@ export default function StyledComponents() {
 ```jsx
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
 import Button from '@material-ui/core/Button';
 
 const styles = {

diff --git a/packages/material-ui-docs/src/NProgressBar/NProgressBar.js b/packages/material-ui-docs/src/NProgressBar/NProgressBar.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import NProgress from 'nprogress';
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
+import { createTheme } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
 import { exactProp } from '@material-ui/utils';
 
@@ -79,7 +80,10 @@ const styles = (theme) => {
   };
 };
 
-const GlobalStyles = withStyles(styles, { flip: false, name: 'MuiNProgressBar' })(() => null);
+const defaultTheme = createTheme();
+const GlobalStyles = withStyles(styles, { defaultTheme, flip: false, name: 'MuiNProgressBar' })(
+  () => null,
+);
 
 /**
  * Elegant and ready to use wrapper on top of https://github.com/rstacruz/nprogress/.

diff --git a/packages/material-ui/test/typescript/hoc-interop.spec.tsx b/packages/material-ui/test/typescript/hoc-interop.spec.tsx
@@ -8,8 +8,8 @@
  *
  * See https://github.com/Microsoft/TypeScript/issues/28339 for in-depth discussion
  */
-import { Button, withStyles } from '@material-ui/core';
-import { createStyles } from '@material-ui/styles';
+import { Button } from '@material-ui/core';
+import { createStyles, withStyles } from '@material-ui/styles';
 import TextField, { TextFieldProps } from '@material-ui/core/TextField';
 import emotionStyled from '@emotion/styled';
 import * as React from 'react';

diff --git a/test/regressions/TestViewer.js b/test/regressions/TestViewer.js
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
-import { withStyles, StyledEngineProvider } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
+import { createTheme, StyledEngineProvider } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
   '@global': {
@@ -85,4 +86,5 @@ TestViewer.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(TestViewer);
+const defaultTheme = createTheme();
+export default withStyles(styles, { defaultTheme })(TestViewer);
diff --git a/test/regressions/fixtures/Input/InputLabels.js b/test/regressions/fixtures/Input/InputLabels.js
@@ -1,22 +1,17 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import InputLabel from '@material-ui/core/InputLabel';
 
-const styles = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-    padding: 20, // so transform doesn't let things get cut off
-  },
-};
-
-function InputLabels(props) {
-  const { classes } = props;
-
+function InputLabels() {
   return (
-    <div className={classes.container}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: '20px', // so transform doesn't let things get cut off
+      }}
+    >
       <InputLabel shrink>First Name Shrunk</InputLabel>
       <InputLabel>First Name</InputLabel>
       <InputLabel focused>Required</InputLabel>
@@ -28,12 +23,8 @@ function InputLabels(props) {
       <InputLabel required error>
         Required Error
       </InputLabel>
-    </div>
+    </Box>
   );
 }
 
-InputLabels.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(InputLabels);
+export default InputLabels;
diff --git a/test/regressions/fixtures/Input/Inputs.js b/test/regressions/fixtures/Input/Inputs.js
@@ -1,25 +1,8 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Input from '@material-ui/core/Input';
 
-const styles = {
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: 200,
-  },
-  input: {
-    margin: 10,
-  },
-  large: {
-    width: 300,
-  },
-};
-
-function Inputs(props) {
-  const { classes } = props;
+function Inputs() {
   const inputRef = React.useRef();
 
   React.useEffect(() => {
@@ -28,21 +11,17 @@ function Inputs(props) {
 
   return (
     <div>
-      <div className={classes.container}>
-        <Input value="Hello world" className={classes.input} />
-        <Input placeholder="Placeholder" className={classes.input} />
-        <Input value="Disabled" className={classes.input} disabled />
-        <Input error value="Error" className={classes.input} />
-        <Input value="Focused" inputRef={inputRef} className={classes.input} />
+      <Box sx={{ display: 'flex', flexDirection: 'column', width: 200 }}>
+        <Input value="Hello world" sx={{ m: '10px' }} />
+        <Input placeholder="Placeholder" sx={{ m: '10px' }} />
+        <Input value="Disabled" sx={{ m: '10px' }} disabled />
+        <Input error value="Error" sx={{ m: '10px' }} />
+        <Input value="Focused" inputRef={inputRef} sx={{ m: '10px' }} />
         <Input type="search" defaultValue="Hello world" />
-      </div>
-      <Input value="Large input" className={clsx(classes.input, classes.large)} />
+      </Box>
+      <Input value="Large input" sx={{ m: '10px', width: 300 }} />
     </div>
   );
 }
 
-Inputs.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(Inputs);
+export default Inputs;
diff --git a/test/regressions/fixtures/Menu/LongMenu.js b/test/regressions/fixtures/Menu/LongMenu.js
@@ -1,19 +1,10 @@
 import * as React from 'react';
 import IconButton from '@material-ui/core/IconButton';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import Box from '@material-ui/core/Box';
 import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-const styles = {
-  root: {
-    margin: '200px 0 200px',
-    background: 'papayawhip',
-    padding: '0 100px',
-  },
-};
-
 const options = [
   'None',
   'Atria',
@@ -45,12 +36,11 @@ class LongMenu extends React.Component {
   }
 
   render() {
-    const { classes } = this.props;
     const { anchorEl } = this.state;
     const open = Boolean(anchorEl);
 
     return (
-      <div className={classes.root}>
+      <Box sx={{ m: '200px 0 200px', background: 'papayawhip', p: '0 100px' }}>
         <IconButton
           ref={this.buttonRef}
           aria-label="more"
@@ -77,13 +67,9 @@ class LongMenu extends React.Component {
             </MenuItem>
           ))}
         </Menu>
-      </div>
+      </Box>
     );
   }
 }
 
-LongMenu.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(LongMenu);
+export default LongMenu;
diff --git a/test/regressions/fixtures/SpeedDial/Directions.js b/test/regressions/fixtures/SpeedDial/Directions.js
@@ -1,44 +1,11 @@
-import clsx from 'clsx';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Avatar from '@material-ui/core/Avatar';
-import { withStyles } from '@material-ui/core/styles';
-import { capitalize } from '@material-ui/core/utils';
+import Box from '@material-ui/core/Box';
 import SpeedDial from '@material-ui/core/SpeedDial';
 import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
 import SpeedDialAction from '@material-ui/core/SpeedDialAction';
 
-const styles = {
-  root: {
-    position: 'relative',
-    height: 360,
-    width: 400,
-  },
-  speedDial: {
-    position: 'absolute',
-    '&$directionUp': {
-      bottom: 0,
-      right: 0,
-    },
-    '&$directionRight': {
-      bottom: 0,
-      left: 0,
-    },
-    '&$directionDown': {
-      top: 0,
-      left: 0,
-    },
-    '&$directionLeft': {
-      top: 0,
-      right: 0,
-    },
-  },
-  directionUp: {},
-  directionRight: {},
-  directionDown: {},
-  directionLeft: {},
-};
-
 function SimpleSpeedDial(props) {
   const tooltipPlacement = {
     up: 'left',
@@ -66,26 +33,23 @@ SimpleSpeedDial.propTypes = {
   direction: PropTypes.string.isRequired,
 };
 
-function Directions({ classes }) {
-  const speedDialClassName = (direction) =>
-    clsx(classes.speedDial, classes[`direction${capitalize(direction)}`]);
-
+function Directions() {
   return (
-    <div className={classes.root}>
+    <Box sx={{ position: 'relative', height: 360, width: 400 }}>
       {['up', 'down'].map((direction) => (
         <SimpleSpeedDial
+          sx={{
+            position: 'absolute',
+            ...(direction === 'up' && { bottom: 0, right: 0 }),
+            ...(direction === 'down' && { top: 0, left: 0 }),
+          }}
           key={direction}
           ariaLabel={direction}
-          className={speedDialClassName(direction)}
           direction={direction}
         />
       ))}
-    </div>
+    </Box>
   );
 }
 
-Directions.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(Directions);
+export default Directions;