[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 { experimentalStyled as styled } from '@material-ui/core/styles';
 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 { experimentalStyled as styled } from '@material-ui/core/styles';
 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>
   );
 }

packages/material-ui-lab/src/SliderStyled/SliderStyled.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useThemeProps, muiStyled, fade, lighten, darken } from '@material-ui/core/styles';
+import { useThemeProps, experimentalStyled, fade, lighten, darken } from '@material-ui/core/styles';
 import { capitalize } from '@material-ui/core/utils';
 import SliderUnstyled from '../SliderUnstyled';
 import ValueLabelStyled from './ValueLabelStyled';
@@ -48,7 +48,7 @@ const overridesResolver = (props, styles, name) => {
   return styleOverrides;
 };
 
-const SliderRoot = muiStyled(
+const SliderRoot = experimentalStyled(
   'span',
   {},
   { muiName: 'MuiSlider', overridesResolver },

packages/material-ui-lab/src/SliderStyled/ValueLabelStyled.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useThemeProps, muiStyled } from '@material-ui/core/styles';
+import { useThemeProps, experimentalStyled } from '@material-ui/core/styles';
 import ValueLabelUnstyled from '../SliderUnstyled/ValueLabelUnstyled';
 
 const overridesResolver = (_, styles) => {
@@ -16,7 +16,7 @@ const overridesResolver = (_, styles) => {
   return styleOverrides;
 };
 
-const ValueLabelRoot = muiStyled(
+const ValueLabelRoot = experimentalStyled(
   'span',
   {},
   { muiName: 'PrivateValueLabel', overridesResolver },

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

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

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

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

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

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

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
 
 // with yarn
-yarn add @material-ui/styles
+yarn add @material-ui/styles @emotion/core @emotion/styled
 ```
 
 ## 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 { ThemeContext as StyledEngineThemeContext } 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}>
+      <StyledEngineThemeContext.Provider value={typeof theme === 'object' ? theme : {}}>
+        {children}
+      </StyledEngineThemeContext.Provider>
+    </ThemeContext.Provider>
+  );
 }
 
 ThemeProvider.propTypes = {

packages/material-ui/src/styles/muiStyled.d.ts → packages/material-ui/src/styles/experimentalStyled.d.ts

@@ -88,7 +88,7 @@ export type PropsOf<
 export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;
 export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;
 
-type JSXInEl = JSX.IntrinsicElements;
+export type JSXInEl = JSX.IntrinsicElements;
 type ReactClassPropKeys = keyof React.ClassAttributes<any>;
 
 export type WithTheme<P, T> = P extends { theme: infer Theme }
@@ -183,7 +183,7 @@ interface MuiStyledOptions<Theme extends object = any> {
   overridesResolver?: (props: any, styles: string | object, name: string) => string | object;
 }
 
-export interface CreateStyled<Theme extends object = any> {
+export interface CreateMUIStyled<Theme extends object = any> {
   <Tag extends React.ComponentType<any>, ExtraProps = {}>(
     tag: Tag,
     options?: StyledOptions,
@@ -198,11 +198,13 @@ export interface CreateStyled<Theme extends object = any> {
 }
 
 /**
- * Cutom styled functionality that support mui specific config.
+ * Custom styled utility that has a default MUI theme.
  *
- * @param options Takes an incomplete theme object and adds the missing parts.
- * @returns A complete, ready to use theme object.
+ * @param tag HTML tag or component that should serve as base.
+ * @param options Styled options for the created component.
+ * @muiOptions Material-UI specific style options, consiting of overrides resolver.
+ * @returns React component that has styles attached to it.
  */
-declare const muiStyled: CreateStyled;
+declare const experimentalStyled: CreateMUIStyled;
 
-export default muiStyled;
+export default experimentalStyled;

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

@@ -2,6 +2,18 @@ import styled from '@material-ui/styled-engine';
 import { propsToClassKey } from '@material-ui/styles';
 import defaultTheme from './defaultTheme';
 
+function isEmpty(obj) {
+  let result = true;
+
+  Object.keys(obj).forEach((key) => {
+    if (obj.hasOwnProperty(key)) {
+      result = false;
+    }
+  });
+
+  return result;
+}
+
 const getStyleOverrides = (name, theme) => {
   let styleOverrides = {};
 
@@ -41,7 +53,7 @@ const variantsResolver = (props, styles, theme, name) => {
     themeVariants.forEach((themeVariant) => {
       let isMatch = true;
       Object.keys(themeVariant.props).forEach((key) => {
-        if (styleProps[key] !== themeVariant.props[key]) {
+        if (styleProps[key] !== themeVariant.props[key] && props[key] !== themeVariant.props[key]) {
           isMatch = false;
         }
       });
@@ -56,25 +68,34 @@ const variantsResolver = (props, styles, theme, name) => {
 
 const shouldForwardProp = (prop) => prop !== 'styleProps' && prop !== 'theme';
 
-const muiStyled = (tag, options, muiOptions) => {
+const experimentalStyled = (tag, options, muiOptions = {}) => {
   const name = muiOptions.muiName;
   const defaultStyledResolver = styled(tag, { shouldForwardProp, label: name, ...options });
   const muiStyledResolver = (...styles) => {
-    if (muiOptions.overridesResolver) {
-      styles.push((props) => {
-        const theme = props.theme || defaultTheme;
+    const stylesWithDefaultTheme = styles.map((stylesArg) => {
+      return typeof stylesArg === 'function'
+        ? ({ theme: themeInput, ...rest }) =>
+            stylesArg({ theme: isEmpty(themeInput) ? defaultTheme : themeInput, ...rest })
+        : stylesArg;
+    });
+
+    if (name && muiOptions.overridesResolver) {
+      stylesWithDefaultTheme.push((props) => {
+        const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
         return muiOptions.overridesResolver(props, getStyleOverrides(name, theme), name);
       });
     }
 
-    styles.push((props) => {
-      const theme = props.theme || defaultTheme;
-      return variantsResolver(props, getVariantStyles(name, theme), theme, name);
-    });
+    if (name) {
+      stylesWithDefaultTheme.push((props) => {
+        const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
+        return variantsResolver(props, getVariantStyles(name, theme), theme, name);
+      });
+    }
 
-    return defaultStyledResolver(...styles);
+    return defaultStyledResolver(...stylesWithDefaultTheme);
   };
   return muiStyledResolver;
 };
 
-export default muiStyled;
+export default experimentalStyled;