[styled-engine] Fix GlobalStyles not to throw when no theme is availa…

…ble (#24671)
mui · Jan 28, 2021 · 2c42921 · 2c42921
1 parent 1bd1e64
commit 2c42921
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/packages/material-ui-styled-engine-sc/src/GlobalStyles/GlobalStyles.js b/packages/material-ui-styled-engine-sc/src/GlobalStyles/GlobalStyles.js
@@ -2,11 +2,11 @@ import PropTypes from 'prop-types';
 import { createGlobalStyle } from 'styled-components';
 
 function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
 }
 
 const GlobalStyles = createGlobalStyle((props) => {
-  const { styles, defaultTheme } = props;
+  const { styles, defaultTheme = {} } = props;
 
   if (typeof styles === 'function') {
     return styles(isEmpty(props.theme) ? defaultTheme : props.theme);

diff --git a/packages/material-ui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js b/packages/material-ui-styled-engine-sc/src/GlobalStyles/GlobalStyles.test.js
@@ -53,6 +53,17 @@ describe('GlobalStyles', () => {
     });
   });
 
+  it('should not throw if no theme is available', () => {
+    expect(() =>
+      render(
+        <GlobalStyles
+          defaultTheme={{ color: 'rgb(0, 0, 255)' }}
+          styles={(theme) => ({ span: { color: theme.color } })}
+        />,
+      ),
+    ).not.to.throw();
+  });
+
   it('should give presedence to styled()', function test() {
     if (/jsdom/.test(window.navigator.userAgent)) this.skip();
 

diff --git a/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.js b/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.js
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import { Global } from '@emotion/react';
 
 function isEmpty(obj) {
-  return Object.keys(obj).length === 0;
+  return obj === undefined || obj === null || Object.keys(obj).length === 0;
 }
 
 export default function GlobalStyles(props) {
-  const { styles, defaultTheme } = props;
+  const { styles, defaultTheme = {} } = props;
 
   const globalStyles =
     typeof styles === 'function'

diff --git a/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.test.js b/packages/material-ui-styled-engine/src/GlobalStyles/GlobalStyles.test.js
@@ -53,6 +53,17 @@ describe('GlobalStyles', () => {
     });
   });
 
+  it('should not throw if no theme is available', () => {
+    expect(() =>
+      render(
+        <GlobalStyles
+          defaultTheme={{ color: 'rgb(0, 0, 255)' }}
+          styles={(theme) => ({ span: { color: theme.color } })}
+        />,
+      ),
+    ).not.to.throw();
+  });
+
   it('should give presedence to styled()', function test() {
     if (/jsdom/.test(window.navigator.userAgent)) this.skip();