[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 { customStyled } 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 = customStyled('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 { customStyled } 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 = customStyled('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/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.

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/styles/customStyled.d.ts

@@ -0,0 +1,29 @@
+import {
+  StyledOptions,
+  JSXInEl,
+  CreateStyledComponentIntrinsic,
+  CreateStyledComponentExtrinsic,
+} from './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>;
+}
+
+/**
+ * Cutom 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/styles/customStyled.js

@@ -0,0 +1,31 @@
+import seStyled from '@material-ui/styled-engine';
+import defaultTheme from './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;
+}

packages/material-ui/src/styles/customStyled.test.js

@@ -0,0 +1,54 @@
+import { ThemeProvider } from '@material-ui/styles';
+import React from 'react';
+import { expect } from 'chai';
+import { createClientRender, screen } from 'test/utils';
+import createMuiTheme from './createMuiTheme';
+import styled from './customStyled';
+
+describe('customStyled', () => {
+  const render = createClientRender();
+  it('should work', () => {
+    const Div = styled('div')({
+      width: '200px',
+    });
+
+    render(<Div data-testid="component">Test</Div>);
+
+    const style = window.getComputedStyle(screen.getByTestId('component'));
+    expect(style.getPropertyValue('width')).to.equal('200px');
+  });
+
+  it('should use defaultTheme if no theme is provided', () => {
+    const Div = styled('div')((props) => ({
+      backgroundColor: props.theme.palette.background.paper,
+    }));
+
+    render(<Div data-testid="component">Test</Div>);
+
+    const style = window.getComputedStyle(screen.getByTestId('component'));
+    expect(style.getPropertyValue('background-color')).to.equal('rgb(255, 255, 255)'); // white
+  });
+
+  it('should use theme from context if available', () => {
+    const Div = styled('div')((props) => ({
+      backgroundColor: props.theme.palette.background.paper,
+    }));
+
+    const theme = createMuiTheme({
+      palette: {
+        background: {
+          paper: 'rgb(255, 255, 0)',
+        },
+      },
+    });
+
+    render(
+      <ThemeProvider theme={theme}>
+        <Div data-testid="component">Test</Div>
+      </ThemeProvider>,
+    );
+
+    const style = window.getComputedStyle(screen.getByTestId('component'));
+    expect(style.getPropertyValue('background-color')).to.equal('rgb(255, 255, 0)');
+  });
+});

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

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

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

@@ -13,6 +13,7 @@ export { default as useThemeProps } from './useThemeProps';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 export { default as muiStyled } from './muiStyled';
+export { default as customStyled } from './customStyled';
 export {
   createGenerateClassName,
   jssPreset,

packages/material-ui/src/styles/muiStyled.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 }
@@ -198,10 +198,12 @@ export interface CreateStyled<Theme extends object = any> {
 }
 
 /**
- * Cutom styled functionality that support mui specific config.
+ * Cutom 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;