fix various problems

docs/next.config.js

@@ -116,7 +116,8 @@ module.exports = {
                         '@material-ui/icons': '../packages/material-ui-icons/src',
                         '@material-ui/lab': '../packages/material-ui-lab/src',
                         '@material-ui/styled-engine': '../packages/material-ui-styled-engine/src',
-                        '@material-ui/styled-engine-sc': '../packages/material-ui-styled-engine-sc/src',
+                        '@material-ui/styled-engine-sc':
+                          '../packages/material-ui-styled-engine-sc/src',
                         '@material-ui/styles': '../packages/material-ui-styles/src',
                         '@material-ui/system': '../packages/material-ui-system/src',
                         '@material-ui/utils': '../packages/material-ui-utils/src',

docs/pages/_document.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ServerStyleSheets } from '@material-ui/styles';
-import { ServerStyleSheet } from 'styled-components'
+import { ServerStyleSheet } from 'styled-components';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import { LANGUAGES_SSR } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
@@ -124,9 +124,11 @@ MyDocument.getInitialProps = async (ctx) => {
   const originalRenderPage = ctx.renderPage;
 
   try {
-    ctx.renderPage = () => originalRenderPage({
-      enhanceApp: App => props => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />))
-    })
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) =>
+          styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
+      });
 
     const initialProps = await Document.getInitialProps(ctx);
 
@@ -155,6 +157,6 @@ MyDocument.getInitialProps = async (ctx) => {
       ],
     };
   } finally {
-    styledComponentsSheet.seal()
+    styledComponentsSheet.seal();
   }
-}; 
+};

docs/src/modules/utils/RtlContext.js

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 
 const RltContext = React.createContext({
   rtl: false,
-  setRtl: () => {}
+  setRtl: () => {},
 });
 
 export default RltContext;

docs/src/pages/components/slider/ContinuousSlider.tsx

@@ -6,7 +6,7 @@ import Slider from '@material-ui/core/Slider';
 import VolumeDown from '@material-ui/icons/VolumeDown';
 import VolumeUp from '@material-ui/icons/VolumeUp';
 import { ThemeProvider } from '@material-ui/styles';
-import styled from 'styled-components';
+import styled from '@material-ui/styled-engine';
 
 const useStyles = makeStyles({
   root: {

docs/src/pages/guides/right-to-left-v5/RtlOptOut.js

@@ -3,10 +3,10 @@ import { createMuiTheme } from '@material-ui/core/styles';
 import styled from '@emotion/styled';
 import { ThemeProvider } from 'emotion-theming';
 
-const Root = styled('div')(props => ({
+const Root = styled('div')((props) => ({
   width: '100%',
-  marginTop: props.theme.spacing(4),
-  marginRight: props.theme.spacing(2),
+  marginTop: props.theme?.spacing(4),
+  marginRight: props.theme?.spacing(2),
 }));
 
 const AffectedText = styled('div')({

docs/src/pages/guides/right-to-left-v5/right-to-left-v5.md

@@ -50,8 +50,8 @@ function RTL(props) {
 If you use `styled-components` as your style engine, you can use the [StyleSheetManager](https://styled-components.com/docs/api#stylesheetmanager) and provide the stylis-plugin-rtl as an item in the `stylisPlugins` property:
 
 ```jsx
-import { StyleSheetManager } from "styled-components";
-import rtlPlugin from "stylis-plugin-rtl";
+import { StyleSheetManager } from 'styled-components';
+import rtlPlugin from 'stylis-plugin-rtl';
 
 function RTL(props) {
   return (

packages/material-ui-styled-engine-sc/README.md

@@ -1,3 +1,3 @@
 # @material-ui/styled-engine-sc
 
-This package is a simple wrapper around the `styled-components` package. It is created to be used as alias for the `@material-ui/styled-engine` package, for the developers who would like to use `styled-components` as a styled engine instead of `@emotion/styled`.
+This package is a simple wrapper around the `styled-components` package. It is created to be used as alias for the `@material-ui/styled-engine` package, for the developers who would like to use `styled-components` as a styled engine instead of `@emotion/styled`.

packages/material-ui-styled-engine-sc/package.json

@@ -37,8 +37,7 @@
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "peerDependencies": {
     "@types/styled-components": "5.1.3",
     "styled-components": "^5.0.0"

packages/material-ui-styled-engine/README.md

@@ -1,3 +1,3 @@
 # @material-ui/styled-engine
 
-This package is a simple wrapper around the `@emotion/styled` package. It is used internally in the `@material-ui/core` package. If you wish to use `styled-components` instead please use an alias to replace this package with `@material-ui/styled-engine-sc`.
+This package is a simple wrapper around the `@emotion/styled` package. It is used internally in the `@material-ui/core` package. If you wish to use `styled-components` instead please use an alias to replace this package with `@material-ui/styled-engine-sc`.

packages/material-ui-styled-engine/package.json

@@ -37,8 +37,7 @@
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/material-ui-styles/**/*.test.{js,ts,tsx}' --exclude '**/node_modules/**'",
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "peerDependencies": {
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",

packages/material-ui/src/Slider/Slider.js

@@ -317,7 +317,14 @@ const getComponentProps = (components, componentsProps, name) => {
 
 const Slider = React.forwardRef(function Slider(inputProps, ref) {
   const props = useThemeProps({ props: inputProps, name: 'MuiSlider' });
-  const { components = {}, componentsProps = {}, ...other } = props;
+  const {
+    // TODO: these proptypes were not generated
+    /* eslint-disable react/prop-types */
+    components = {},
+    /* eslint-disable react/prop-types */
+    componentsProps = {},
+    ...other
+  } = props;
   return (
     <SliderUnstyled
       {...other}

packages/material-ui/src/Slider/Slider.test.js

@@ -2,14 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { spy, stub } from 'sinon';
 import { expect } from 'chai';
-import {
-  getClasses,
-  createMount,
-  describeConformance,
-  act,
-  createClientRender,
-  fireEvent,
-} from 'test/utils';
+import { createMount, describeConformance, act, createClientRender, fireEvent } from 'test/utils';
 import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 import Slider from './Slider';
 
@@ -36,11 +29,11 @@ describe('<Slider />', () => {
   const render = createClientRender();
 
   before(() => {
-    classes = getClasses(<Slider value={0} />);
+    classes = {};
   });
 
   describeConformance(<Slider value={0} />, () => ({
-    classes,
+    classes: {},
     inheritComponent: 'span',
     mount,
     refInstanceof: window.HTMLSpanElement,

packages/material-ui/src/Slider/index.js

@@ -1,2 +1 @@
 export { default } from './Slider';
-export * from './Slider';

packages/material-ui/src/SliderUnstyled/SliderUnstyled.js

@@ -151,7 +151,7 @@ const useSliderClasses = (props) => {
 
   const utilityClasses = {
     root: clsx(getUtilityClass('root'), getUtilityClass(`color${capitalize(color)}`), {
-      ['Mui-disabled']: disabled,
+      'Mui-disabled': disabled,
       [getUtilityClass('marked')]: marked,
       [getUtilityClass('vertical')]: orientation === 'vertical',
       [getUtilityClass('trackInverted')]: track === 'inverted',
@@ -163,7 +163,7 @@ const useSliderClasses = (props) => {
     markLabel: getUtilityClass('markLabel'),
     valueLabel: getUtilityClass('valueLabel'),
     thumb: clsx(getUtilityClass('thumb'), getUtilityClass(`thumbColor${capitalize(color)}`), {
-      ['Mui-disabled']: disabled,
+      'Mui-disabled': disabled,
     }),
   };
 
@@ -200,8 +200,13 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     valueLabelDisplay = 'off',
     valueLabelFormat = Identity,
     isRtl = false,
+    // TODO: these proptypes were not generated
+    /* eslint-disable react/prop-types */
     components = {},
+    /* eslint-disable react/prop-types */
     componentsProps = {},
+    /* eslint-disable react/prop-types */
+    theme,
     ...other
   } = props;
 
@@ -568,7 +573,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
     ...axisProps[axis].leap(trackLeap),
   };
 
-  const Root = components.Root || 'span';
+  const Root = components.Root || Component;
   const rootProps = componentsProps.root || {};
 
   const Rail = components.Rail || 'span';
@@ -617,7 +622,7 @@ const Slider = React.forwardRef(function Slider(props, ref) {
       ref={handleRef}
       onMouseDown={handleMouseDown}
       state={isComponent(Root) ? stateAndProps : undefined}
-      theme={isComponent(Root) ? props.theme : undefined}
+      theme={isComponent(Root) ? theme : undefined}
       {...rootProps}
       {...other}
       className={clsx(utilityClasses.root, rootProps.className, className)}
@@ -697,9 +702,9 @@ const Slider = React.forwardRef(function Slider(props, ref) {
             <Thumb
               {...thumbProps}
               className={clsx(utilityClasses.thumb, thumbProps.className, {
-                ['Mui-active']: active === index,
-                ['Mui-disabled']: disabled,
-                ['Mui-focusVisible']: focusVisible === index,
+                'Mui-active': active === index,
+                'Mui-disabled': disabled,
+                'Mui-focusVisible': focusVisible === index,
               })}
               tabIndex={disabled ? null : 0}
               role="slider"

packages/material-ui/src/SliderUnstyled/SliderUnstyled.test.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
-import {
-  createClientRender,
-} from 'test/utils';
+import { expect } from 'chai';
+import { createClientRender } from 'test/utils';
 import SliderUnstyled from './SliderUnstyled';
 
 describe('<SliderUnstyled />', () => {
   const render = createClientRender();
 
   it('should not throw when rendered', () => {
     expect(() => {
-      render(<SliderUnstyled />)
+      render(<SliderUnstyled />);
     }).not.to.throw();
   });
-});
+});

packages/material-ui/src/SliderUnstyled/index.js

@@ -1,2 +1 @@
 export { default } from './SliderUnstyled';
-export * from './SliderUnstyled';

packages/material-ui/src/styles/index.d.ts

@@ -24,7 +24,6 @@ export {
 } from './withStyles';
 export { default as withTheme, WithTheme } from './withTheme';
 export { default as muiStyled } from './muiStyled';
-export * from './muiStyled';
 export { default as styled, ComponentCreator, StyledProps } from './styled';
 export {
   createGenerateClassName,

packages/material-ui/src/styles/index.js

@@ -12,7 +12,6 @@ export { default as useTheme } from './useTheme';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 export { default as muiStyled } from './muiStyled';
-export * from './muiStyled';
 export {
   createGenerateClassName,
   jssPreset,

packages/material-ui/src/styles/muiStyled.js

@@ -1,5 +1,6 @@
 import styled from '@material-ui/styled-engine';
 import { propsToClassKey } from '@material-ui/styles';
+import defaultTheme from './defaultTheme';
 
 const getStyleOverrides = (name, theme) => {
   let styleOverrides = {};
@@ -34,8 +35,8 @@ const getVariantStyles = (name, theme) => {
 
 const shouldForwardProp = (prop) => prop !== 'state' && prop !== 'theme';
 
-const muiStyled = (el, params, muiConfig) => {
-  const result = styled(el, { shouldForwardProp, ...params });
+const muiStyled = (el, styledParams, muiConfig) => {
+  const result = styled(el, { shouldForwardProp, ...styledParams });
   const muiFunc = (...params) => {
     const name = muiConfig.muiName;
 

packages/material-ui/src/styles/useThemeProps.d.ts

@@ -1,8 +1,8 @@
-interface ThemeWithProps<Components> {
+export interface ThemeWithProps<Components> {
   components?: { [K in keyof Components]: { defaultProps?: Partial<Components[K]> } };
 }
 
-type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   components: Record<Name, { defaultProps: infer Props }>;
 }
   ? Props

packages/material-ui/src/styles/useThemeProps.js

@@ -1,8 +1,9 @@
-import useTheme from './useTheme';
 import { getThemeProps } from '@material-ui/styles';
+import useTheme from './useTheme';
 import defaultTheme from './defaultTheme';
 
 export default function useThemeProps({ props: inputProps, name }) {
+  /* eslint-disable prefer-object-spread */
   const props = Object.assign({}, inputProps);
 
   const contextTheme = useTheme() || defaultTheme;

scripts/sizeSnapshot/webpack.config.js

@@ -116,8 +116,14 @@ module.exports = async function webpackConfig() {
       alias: {
         '@material-ui/core': path.join(workspaceRoot, 'packages/material-ui/build'),
         '@material-ui/lab': path.join(workspaceRoot, 'packages/material-ui-lab/build'),
-        '@material-ui/styled-engine': path.join(workspaceRoot, 'packages/material-ui-styled-engine/build'),
-        '@material-ui/styled-engine-sc': path.join(workspaceRoot, 'packages/material-ui-styles-sc/build'),
+        '@material-ui/styled-engine': path.join(
+          workspaceRoot,
+          'packages/material-ui-styled-engine/build',
+        ),
+        '@material-ui/styled-engine-sc': path.join(
+          workspaceRoot,
+          'packages/material-ui-styles-sc/build',
+        ),
         '@material-ui/styles': path.join(workspaceRoot, 'packages/material-ui-styles/build'),
         '@material-ui/system': path.join(workspaceRoot, 'packages/material-ui-system/build'),
         '@material-ui/utils': path.join(workspaceRoot, 'packages/material-ui-utils/build'),

webpackBaseConfig.js

@@ -11,8 +11,14 @@ module.exports = {
       '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'),
       '@material-ui/icons': path.resolve(__dirname, './packages/material-ui-icons/src'),
       '@material-ui/lab': path.resolve(__dirname, './packages/material-ui-lab/src'),
-      '@material-ui/styled-engine': path.resolve(__dirname, './packages/material-ui-styled-engine/src'),
-      '@material-ui/styled-engine-sc': path.resolve(__dirname, './packages/material-ui-styled-engine-sc/src'),
+      '@material-ui/styled-engine': path.resolve(
+        __dirname,
+        './packages/material-ui-styled-engine/src',
+      ),
+      '@material-ui/styled-engine-sc': path.resolve(
+        __dirname,
+        './packages/material-ui-styled-engine-sc/src',
+      ),
       '@material-ui/styles': path.resolve(__dirname, './packages/material-ui-styles/src'),
       '@material-ui/system': path.resolve(__dirname, './packages/material-ui-system/src'),
       '@material-ui/utils': path.resolve(__dirname, './packages/material-ui-utils/src'),