[muiStyled] Support default theme when none is available

docs/src/pages/components/slider-styled/ContinuousSlider.js

@@ -1,27 +1,24 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import styled from '@material-ui/core/styled';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Slider from '@material-ui/lab/SliderStyled';
 import VolumeDown from '@material-ui/icons/VolumeDown';
 import VolumeUp from '@material-ui/icons/VolumeUp';
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-  },
+const Root = styled('div')({
+  width: 200,
 });
 
 export default function ContinuousSlider() {
-  const classes = useStyles();
   const [value, setValue] = React.useState(30);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
   return (
-    <div className={classes.root}>
+    <Root>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>
@@ -44,6 +41,6 @@ export default function ContinuousSlider() {
         Disabled slider
       </Typography>
       <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
-    </div>
+    </Root>
   );
 }

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

@@ -1,19 +1,16 @@
 import * as React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import styled from '@material-ui/core/styled';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import Slider from '@material-ui/lab/SliderStyled';
 import VolumeDown from '@material-ui/icons/VolumeDown';
 import VolumeUp from '@material-ui/icons/VolumeUp';
 
-const useStyles = makeStyles({
-  root: {
-    width: 200,
-  },
+const Root = styled('div')({
+  width: 200,
 });
 
 export default function ContinuousSlider() {
-  const classes = useStyles();
   const [value, setValue] = React.useState<number>(30);
 
   const handleChange = (
@@ -24,7 +21,7 @@ export default function ContinuousSlider() {
   };
 
   return (
-    <div className={classes.root}>
+    <Root>
       <Typography id="continuous-slider" gutterBottom>
         Volume
       </Typography>
@@ -47,6 +44,6 @@ export default function ContinuousSlider() {
         Disabled slider
       </Typography>
       <Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
-    </div>
+    </Root>
   );
 }

docs/src/pages/css-in-js/basics/AdaptingStyledComponents.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(({ color, ...other }) => <Button {...other} />)({

docs/src/pages/css-in-js/basics/AdaptingStyledComponents.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 

docs/src/pages/getting-started/installation/installation.md

@@ -10,10 +10,10 @@ To install and save in your `package.json` dependencies, run:
 
 ```sh
 // with npm
-npm install @material-ui/core@next @emotion/core @emotion/styled
+npm install @material-ui/core@next @emotion/core @emotion/styled emotion-theming
 
 // with yarn
-yarn add @material-ui/core@next @emotion/core @emotion/styled
+yarn add @material-ui/core@next @emotion/core @emotion/styled emotion-theming
 ```
 
 Please note that [react](https://www.npmjs.com/package/react) >= 16.8.0 and [react-dom](https://www.npmjs.com/package/react-dom) >= 16.8.0 are peer dependencies.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -196,6 +196,15 @@ const theme = createMuitheme({
 });
 ```
 
+### Styles
+
+- The `styled` utility from `@material-ui/core/styles` was renamed to `legacy_styled`, so that it won't conflict with the new `@material-ui/core/styled` utility.
+
+  ```diff
+  -import { styled } from '@material-ui/core/styles';
+  +import { legacy_styled } from '@material-ui/core/styles';
+  ```
+
 ### Alert
 
 - Move the component from the lab to the core. The component is now stable.

docs/src/pages/production-error/ErrorDecoder.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRouter } from 'next/router';
 import Link from '@material-ui/core/Link';
 import Typography from '@material-ui/core/Typography';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import { render as renderMarkdown } from 'docs/src/modules/utils/parseMarkdown';
 

docs/src/pages/styles/api/api.md

@@ -156,7 +156,7 @@ The method is an alternative to `.toString()` when you are rendering the whole p
 
 ⚠️ You must call `.collect()` before using this method.
 
-## `styled(Component)(styles, [options]) => Component`
+## `legacy_styled(Component)(styles, [options]) => Component`
 
 Link a style sheet with a function component using the **styled components** pattern.
 
@@ -183,7 +183,7 @@ Link a style sheet with a function component using the **styled components** pat
 
 ```jsx
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 
 const MyComponent = styled('div')({
   backgroundColor: 'red',

docs/src/pages/styles/basics/AdaptingStyledComponents.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(({ color, ...other }) => <Button {...other} />)({

docs/src/pages/styles/basics/AdaptingStyledComponents.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button, { ButtonProps } from '@material-ui/core/Button';
 import { Omit } from '@material-ui/types';
 

docs/src/pages/styles/basics/StyledComponents.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({

docs/src/pages/styles/basics/StyledComponents.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({

docs/src/pages/styles/basics/basics.md

@@ -72,7 +72,7 @@ You can also [change this behavior](/styles/advanced/#string-templates), with so
 
 ```jsx
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 
 const MyButton = styled(Button)({

docs/src/pages/system/basics/JSS.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import { compose, spacing, palette } from '@material-ui/system';
 
 const Box = styled('div')(compose(spacing, palette));

docs/src/pages/system/basics/JSS.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { styled } from '@material-ui/core/styles';
+import { legacy_styled as styled } from '@material-ui/core/styles';
 import { compose, spacing, palette } from '@material-ui/system';
 
 const Box = styled('div')(compose(spacing, palette));

packages/material-ui-styled-engine-sc/src/index.js

@@ -10,3 +10,5 @@ export default function styled(tag, options) {
 
   return scStyled(tag);
 }
+
+export { ThemeProvider } from 'styled-components';

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

@@ -39,7 +39,8 @@
   "dependencies": {},
   "peerDependencies": {
     "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27"
+    "@emotion/styled": "^10.0.27",
+    "emotion-theming": "^10.0.27"
   },
   "sideEffects": false,
   "publishConfig": {

packages/material-ui-styled-engine/src/index.d.ts

@@ -1,2 +1,3 @@
 export * from '@emotion/styled';
 export { default } from '@emotion/styled';
+export * from 'emotion-theming';

packages/material-ui-styled-engine/src/index.js

@@ -1 +1,2 @@
 export { default } from '@emotion/styled';
+export * from 'emotion-theming';

packages/material-ui-styles/README.md

@@ -8,10 +8,10 @@ Install the package in your project directory with:
 
 ```sh
 // with npm
-npm install @material-ui/styles
+npm install @material-ui/styles @emotion/core @emotion/styled emotion-theming
 
 // with yarn
-yarn add @material-ui/styles
+yarn add @material-ui/styles @emotion/core @emotion/styled emotion-theming
 ```
 
 ## Documentation

packages/material-ui-styles/package.json

@@ -37,7 +37,10 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "peerDependencies": {
+    "@emotion/core": "^10.0.27",
+    "@emotion/styled": "^10.0.27",
     "@types/react": "^16.8.6",
+    "emotion-theming": "^10.0.27",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },
@@ -49,6 +52,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.4",
     "@emotion/hash": "^0.8.0",
+    "@material-ui/styled-engine": "^5.0.0-alpha.11",
     "@material-ui/types": "^5.1.0",
     "@material-ui/utils": "^5.0.0-alpha.8",
     "clsx": "^1.0.4",

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@material-ui/utils';
+import { ThemeProvider as StyledEngineThemeProvider } from '@material-ui/styled-engine';
 import ThemeContext from '../useTheme/ThemeContext';
 import useTheme from '../useTheme';
 import nested from './nested';
@@ -61,7 +62,13 @@ function ThemeProvider(props) {
     return output;
   }, [localTheme, outerTheme]);
 
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+  return (
+    <ThemeContext.Provider value={theme}>
+      <StyledEngineThemeProvider theme={typeof theme === 'object' ? theme : {}}>
+        {children}
+      </StyledEngineThemeProvider>
+    </ThemeContext.Provider>
+  );
 }
 
 ThemeProvider.propTypes = {

packages/material-ui/package.json

@@ -42,6 +42,7 @@
     "@emotion/core": "^10.0.27",
     "@emotion/styled": "^10.0.27",
     "@types/react": "^16.8.6",
+    "emotion-theming": "^10.0.27",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   },

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

@@ -12,7 +12,7 @@ import {
   typography,
   css,
 } from '@material-ui/system';
-import styled from '../styles/styled';
+import styled from '../styles/legacy_styled';
 
 export const styleFunction = css(
   compose(

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

@@ -362,6 +362,9 @@ export * from './StepLabel';
 export { default as Stepper } from './Stepper';
 export * from './Stepper';
 
+export { default as styled } from './styled';
+export * from './styled';
+
 export { default as SvgIcon } from './SvgIcon';
 export * from './SvgIcon';
 

packages/material-ui/src/index.js

@@ -288,6 +288,9 @@ export * from './StepLabel';
 export { default as Stepper } from './Stepper';
 export * from './Stepper';
 
+export { default as styled } from './styled';
+export * from './styled';
+
 export { default as SvgIcon } from './SvgIcon';
 export * from './SvgIcon';
 

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

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

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

@@ -0,0 +1 @@
+export { default } from './styled';

packages/material-ui/src/styled/styled.d.ts

@@ -0,0 +1,29 @@
+import {
+  StyledOptions,
+  JSXInEl,
+  CreateStyledComponentIntrinsic,
+  CreateStyledComponentExtrinsic,
+} from '../styles/muiStyled';
+
+export interface CreateStyled<Theme extends object = any> {
+  <Tag extends React.ComponentType<any>, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions
+  ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;
+
+  <Tag extends keyof JSXInEl, ExtraProps = {}>(
+    tag: Tag,
+    options?: StyledOptions
+  ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;
+}
+
+/**
+ * Custom styled utility that has a default MUI theme.
+ *
+ * @param tag HTML tag or component that should serve as base.
+ * @param options Styled options for the created component.
+ * @returns React component that has styles attached to it.
+ */
+declare const styled: CreateStyled;
+
+export default styled;

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

@@ -0,0 +1,31 @@
+import seStyled from '@material-ui/styled-engine';
+import defaultTheme from '../styles/defaultTheme';
+
+function isEmpty(obj) {
+  let result = true;
+
+  Object.keys(obj).forEach((key) => {
+    if (obj.hasOwnProperty(key)) {
+      result = false;
+    }
+  });
+
+  return result;
+}
+
+export default function styled(tag, options) {
+  const defaultStyledResolver = seStyled(tag, options);
+
+  const customStyledResolver = (...styles) => {
+    const stylesWithDefaultTheme = styles.map((stylesArg) => {
+      return typeof stylesArg === 'function'
+        ? ({ theme: themeInput, ...rest }) =>
+            stylesArg({ theme: isEmpty(themeInput) ? defaultTheme : themeInput, ...rest })
+        : stylesArg;
+    });
+
+    return defaultStyledResolver(...stylesWithDefaultTheme);
+  };
+
+  return customStyledResolver;
+}