implementet theme default props, implemented rtl

packages/material-ui-styles/package.json

@@ -38,6 +38,7 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "peerDependencies": {
+    "@emotion/core": "^10.0.27",
     "@types/react": "^16.8.6",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
@@ -49,6 +50,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.4",
+    "@emotion/cache": "^10.0.27",
     "@emotion/hash": "^0.8.0",
     "@material-ui/types": "^5.1.0",
     "@material-ui/utils": "^5.0.0-alpha.1",
@@ -63,7 +65,8 @@
     "jss-plugin-props-sort": "^10.0.3",
     "jss-plugin-rule-value-function": "^10.0.3",
     "jss-plugin-vendor-prefixer": "^10.0.3",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "stylis-plugin-rtl": "^1.0.0"
   },
   "sideEffects": false,
   "publishConfig": {

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { exactProp } from '@material-ui/utils';
+import { CacheProvider } from "@emotion/core";
+import createCache from "@emotion/cache";
+import rtlPlugin from "stylis-plugin-rtl";
 import ThemeContext from '../useTheme/ThemeContext';
 import useTheme from '../useTheme';
 import nested from './nested';
@@ -61,7 +64,21 @@ function ThemeProvider(props) {
     return output;
   }, [localTheme, outerTheme]);
 
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+  const cacheLtr = createCache({
+    key: "mui",
+    stylisPlugins: [],
+    speedy: true
+  });
+
+  const cacheRtl = createCache({
+    key: "muirtl",
+    stylisPlugins: [rtlPlugin],
+    speedy: true
+  });
+
+  const rtl = theme.direction === 'rtl';
+
+  return <CacheProvider value={rtl ? cacheRtl : cacheLtr}><ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider></CacheProvider>;
 }
 
 ThemeProvider.propTypes = {

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
+import { getThemeProps } from '@material-ui/styles';
 import useTheme from '../styles/useTheme';
 import { fade, lighten, darken } from '../styles/colorManipulator';
 import SliderBase from './Slider';
 import ValueLabel from './ValueLabel';
+import defaultTheme from '../styles/defaultTheme';
 
 const shouldForwardProp = (prop) =>
   isPropValid(prop) && prop !== 'color' && prop !== 'orientation' && prop !== 'disabled';
@@ -202,17 +204,32 @@ const StyledMarkLabel = styled('span', { shouldForwardProp })((props) => ({
   }),
 }));
 
-// This implementatino uses the ClassNames component https://emotion.sh/docs/class-names
-const Slider = React.forwardRef(function Slider(props, ref) {
-  const { components = {}, componentsProps = {}, ...other } = props;
+const useThemeProps = (inputProps, ref, name) => {
+  const props = Object.assign({}, inputProps);
+  const { innerRef } = props;
+
+  const contextTheme = useTheme() || defaultTheme;
+
+  const more = getThemeProps({ theme: contextTheme, name, props });
 
-  const theme = useTheme();
+  const theme = more.theme || contextTheme;
   const isRtl = theme.direction === 'rtl';
 
+  return {
+    ref: innerRef || ref,
+    theme,
+    isRtl,
+    ...more,
+  };
+};
+
+// This implementatino uses the ClassNames component https://emotion.sh/docs/class-names
+const Slider = React.forwardRef(function Slider(inputProps, inputRef) {
+  const props = useThemeProps(inputProps, inputRef, 'MuiSlider');
+  const { components = {}, componentsProps = {}, ref, ...other } = props;
+
   return (
     <SliderBase
-      isRtl={isRtl}
-      theme={theme}
       {...other}
       components={{
         root: StyledComponent,

yarn.lock

@@ -5774,6 +5774,11 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssjanus@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/cssjanus/-/cssjanus-1.3.2.tgz#7c23d39be92f63e1557a75c015f61d95009bd6b3"
+  integrity sha512-5pM/C1MIfoqhXa7k9PqSnrjj1SSZDakfyB1DZhdYyJoDUH+evGbsUg6/bpQapTJeSnYaj0rdzPUMeM33CvB0vw==
+
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
@@ -15426,6 +15431,13 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylis-plugin-rtl@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/stylis-plugin-rtl/-/stylis-plugin-rtl-1.1.0.tgz#028d72419ccc47eeaaec684f3e192534f2c57ece"
+  integrity sha512-FPoSxP+gbBLJRUXDRDFNBhqy/eToquDLn7ZrjIVBRfXaZ9bunwNnDtDm2qW1EoU0c93krm1Dy+8iVmJpjRGsKw==
+  dependencies:
+    cssjanus "^1.3.0"
+
 [email protected]:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"