[styled-engine] Add StylesProvider with injectFirst option

docs/pages/_app.js

@@ -11,6 +11,7 @@ import { create } from 'jss';
 import jssRtl from 'jss-rtl';
 import { useRouter } from 'next/router';
 import { StylesProvider, jssPreset } from '@material-ui/styles';
+import { StylesProvider as CoreStylesProvider } from '@material-ui/core';
 import pages from 'docs/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
@@ -318,11 +319,13 @@ function AppWrapper(props) {
       </NextHead>
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
-          <StylesProvider jss={jss}>
-            <ThemeProvider>
-              <StyledEngineProvider>{children}</StyledEngineProvider>
-            </ThemeProvider>
-          </StylesProvider>
+          <CoreStylesProvider injectFirst>
+            <StylesProvider jss={jss}>
+              <ThemeProvider>
+                <StyledEngineProvider>{children}</StyledEngineProvider>
+              </ThemeProvider>
+            </StylesProvider>
+          </CoreStylesProvider>
         </PageContext.Provider>
         <LanguageNegotiation />
         <Analytics />

docs/src/modules/utils/getDemoConfig.js

@@ -11,9 +11,15 @@ function jsDemo(demoData) {
       'index.js': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { StylesProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
+ReactDOM.render(
+  <StylesProvider injectFirst>
+    <Demo />
+  </StylesProvider>,
+  document.querySelector("#root")
+);
     `.trim(),
     },
   };
@@ -30,9 +36,15 @@ function tsDemo(demoData) {
       'index.tsx': `
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { StylesProvider } from '@material-ui/core';
 import Demo from './demo';
 
-ReactDOM.render(<Demo />, document.querySelector('#root'));
+ReactDOM.render(
+  <StylesProvider injectFirst>
+    <Demo />
+  </StylesProvider>,
+  document.querySelector("#root")
+);
     `.trim(),
       'tsconfig.json': `{
   "compilerOptions": {

docs/src/pages/components/drawers/ClippedDrawer.js

@@ -28,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   drawerContainer: {
     overflow: 'auto',

docs/src/pages/components/drawers/ClippedDrawer.tsx

@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     drawerContainer: {
       overflow: 'auto',

docs/src/pages/components/drawers/MiniDrawer.js

@@ -49,6 +49,7 @@ const useStyles = makeStyles((theme) => ({
     width: drawerWidth,
     flexShrink: 0,
     whiteSpace: 'nowrap',
+    boxSizing: 'border-box',
   },
   drawerOpen: {
     width: drawerWidth,

docs/src/pages/components/drawers/MiniDrawer.tsx

@@ -50,6 +50,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: drawerWidth,
       flexShrink: 0,
       whiteSpace: 'nowrap',
+      boxSizing: 'border-box',
     },
     drawerOpen: {
       width: drawerWidth,

docs/src/pages/components/drawers/PermanentDrawerLeft.js

@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,

docs/src/pages/components/drawers/PermanentDrawerLeft.tsx

@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,

docs/src/pages/components/drawers/PermanentDrawerRight.js

@@ -29,6 +29,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,

docs/src/pages/components/drawers/PermanentDrawerRight.tsx

@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,

docs/src/pages/components/drawers/PersistentDrawerLeft.js

@@ -50,6 +50,7 @@ const useStyles = makeStyles((theme) => ({
   },
   drawerPaper: {
     width: drawerWidth,
+    boxSizing: 'border-box',
   },
   drawerHeader: {
     display: 'flex',

docs/src/pages/components/drawers/PersistentDrawerLeft.tsx

@@ -51,6 +51,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     drawerPaper: {
       width: drawerWidth,
+      boxSizing: 'border-box',
     },
     drawerHeader: {
       display: 'flex',

docs/src/pages/components/drawers/ResponsiveDrawer.js

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme) => ({
   // necessary for content to be below app bar
   toolbar: theme.mixins.toolbar,
   drawerPaper: {
+    boxSizing: 'border-box',
     width: drawerWidth,
   },
   content: {

docs/src/pages/components/drawers/ResponsiveDrawer.tsx

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) =>
     // necessary for content to be below app bar
     toolbar: theme.mixins.toolbar,
     drawerPaper: {
+      boxSizing: 'border-box',
       width: drawerWidth,
     },
     content: {

docs/src/pages/getting-started/templates/dashboard/Dashboard.js

@@ -84,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    boxSizing: 'border-box',
   },
   drawerPaperClose: {
     overflowX: 'hidden',

docs/src/pages/getting-started/templates/dashboard/Dashboard.tsx

@@ -84,6 +84,7 @@ const useStyles = makeStyles((theme) => ({
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
+    boxSizing: 'border-box',
   },
   drawerPaperClose: {
     overflowX: 'hidden',

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

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

packages/material-ui-styled-engine-sc/src/StylesProvider/StylesProvider.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StylesProviderProps {
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+
+export default function StylesProvider(props: StylesProviderProps): JSX.Element;

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheetManager } from 'styled-components';
+
+let injectFirstNode;
+
+export function StylesProvider(props) {
+  const { injectFirst, children } = props;
+
+  React.useEffect(() => {
+    if (injectFirst && !injectFirstNode) {
+      const head = document.head;
+      injectFirstNode = document.createElement('style');
+      injectFirstNode.setAttribute('data-styled', 'active');
+      head.insertBefore(injectFirstNode, head.firstChild);
+    }
+
+    return () => {
+      const head = document.head;
+      head.removeChild(injectFirstNode);
+    };
+  }, [injectFirst]);
+
+  return injectFirst ? (
+    <StyleSheetManager target={injectFirstNode}>{children}</StyleSheetManager>
+  ) : (
+    children
+  );
+}
+
+StylesProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * By default, the styles are injected last in the <head> element of the page.
+   * As a result, they gain more specificity than any other style sheet.
+   * If you want to override Material-UI's styles, set this prop.
+   */
+  injectFirst: PropTypes.bool,
+};
+
+export default StylesProvider;

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

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

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

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

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

@@ -1,2 +1,3 @@
 export * from 'styled-components';
 export { default } from 'styled-components';
+export { default as StylesProvider } from './StylesProvider';

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

@@ -12,3 +12,5 @@ export default function styled(tag, options) {
 }
 
 export { ThemeContext } from 'styled-components';
+
+export { default as StylesProvider } from './StylesProvider';

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

@@ -38,7 +38,9 @@
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@babel/runtime": "^7.4.4"
+    "@babel/runtime": "^7.4.4",
+    "@emotion/cache": "^11.0.0",
+    "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+export interface StylesProviderProps {
+  children?: React.ReactNode;
+  injectFirst?: boolean;
+}
+
+export default function StylesProvider(props: StylesProviderProps): JSX.Element;

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+
+// Cache with option to prepend emotion's style tag
+export const cache = createCache({ key: 'css', prepend: true });
+
+export function StylesProvider(props) {
+  const { injectFirst, children } = props;
+  return injectFirst ? <CacheProvider value={cache}>{children}</CacheProvider> : children;
+}
+
+StylesProvider.propTypes = {
+  /**
+   * Your component tree.
+   */
+  children: PropTypes.node,
+  /**
+   * By default, the styles are injected last in the <head> element of the page.
+   * As a result, they gain more specificity than any other style sheet.
+   * If you want to override Material-UI's styles, set this prop.
+   */
+  injectFirst: PropTypes.bool,
+};
+
+export default StylesProvider;

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

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

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

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

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

@@ -1,3 +1,4 @@
 export * from '@emotion/styled';
 export { default } from '@emotion/styled';
 export { ThemeContext } from '@emotion/react';
+export { default as StylesProvider } from './StylesProvider';

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

@@ -1,2 +1,3 @@
 export { default } from '@emotion/styled';
 export { ThemeContext } from '@emotion/react';
+export { default as StylesProvider } from './StylesProvider';

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

@@ -467,3 +467,5 @@ export * from './Zoom';
 
 export { default as useAutocomplete } from './useAutocomplete';
 export * from './useAutocomplete';
+
+export { StylesProvider } from '@material-ui/styled-engine';

packages/material-ui/src/index.js

@@ -400,3 +400,5 @@ export * from './Zoom';
 
 // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
+
+export { StylesProvider } from '@material-ui/styled-engine';

test/regressions/TestViewer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useFakeTimers } from 'sinon';
+import { StylesProvider } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 
 const styles = (theme) => ({
@@ -71,9 +72,11 @@ function TestViewer(props) {
   }, []);
 
   return (
-    <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
-      {children}
-    </div>
+    <StylesProvider injectFirst>
+      <div aria-busy={!ready} data-testid="testcase" className={classes.root}>
+        {children}
+      </div>
+    </StylesProvider>
   );
 }