[docs] Add GlobalStyles API (#25191)

docs/pages/api-docs/global-styles.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './global-styles.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docs/translations/api-docs/global-styles',
+    false,
+    /global-styles.*.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/api-docs/global-styles.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "styles": {
+      "type": {
+        "name": "union",
+        "description": "func<br>&#124;&nbsp;number<br>&#124;&nbsp;object<br>&#124;&nbsp;{ __emotion_styles: any }<br>&#124;&nbsp;string<br>&#124;&nbsp;bool"
+      }
+    }
+  },
+  "name": "GlobalStyles",
+  "styles": { "classes": [], "globalClasses": {}, "name": null },
+  "spread": true,
+  "filename": "/packages/material-ui/src/GlobalStyles/GlobalStyles.js",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/customization/how-to-customize/\">How To Customize</a></li></ul>",
+  "styledComponent": true,
+  "cssComponent": false
+}

docs/src/pages/customization/how-to-customize/how-to-customize.md

@@ -1,3 +1,7 @@
+---
+components: GlobalStyles
+---
+
 # How to customize
 
 <p class="description">You can easily customize the appearance of a Material-UI component.</p>

docs/src/pagesApi.js

@@ -57,6 +57,7 @@ module.exports = [
   { pathname: '/api-docs/form-group' },
   { pathname: '/api-docs/form-helper-text' },
   { pathname: '/api-docs/form-label' },
+  { pathname: '/api-docs/global-styles' },
   { pathname: '/api-docs/grid' },
   { pathname: '/api-docs/grow' },
   { pathname: '/api-docs/hidden' },

docs/translations/api-docs/global-styles/global-styles-de.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-es.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-fr.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-ja.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-pt.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-ru.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles-zh.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

docs/translations/api-docs/global-styles/global-styles.json

@@ -0,0 +1,5 @@
+{
+  "componentDescription": "",
+  "propDescriptions": { "styles": "The styles you want to apply globally." },
+  "classDescriptions": {}
+}

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

@@ -1,11 +1,20 @@
-import { GlobalStylesProps } from '@material-ui/styled-engine';
-import { DistributiveOmit } from '@material-ui/types';
+import { GlobalStylesProps as StyledGlobalStylesProps } from '@material-ui/styled-engine';
+
+export interface GlobalStylesProps {
+  /**
+   * The styles you want to apply globally.
+   */
+  styles: StyledGlobalStylesProps['styles'];
+}
+
 /**
+ *
+ * Demos:
+ *
+ * - [How To Customize](https://material-ui.com/customization/how-to-customize/)
  *
  * API:
  *
- * - [Global API](https://material-ui.com/api/global/)
+ * - [GlobalStyles API](https://material-ui.com/api/global-styles/)
  */
-export default function GlobalStyles(
-  props: DistributiveOmit<GlobalStylesProps, 'defaultTheme'>
-): React.ReactElement;
+export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement;

packages/material-ui/src/GlobalStyles/GlobalStyles.js

@@ -3,13 +3,28 @@ import PropTypes from 'prop-types';
 import { GlobalStyles as StyledEngineGlobalStyles } from '@material-ui/styled-engine';
 import defaultTheme from '../styles/defaultTheme';
 
-/**
- * @ignore - do not document.
- */
-export default function GlobalStyles(props) {
+function GlobalStyles(props) {
   return <StyledEngineGlobalStyles {...props} defaultTheme={defaultTheme} />;
 }
 
 GlobalStyles.propTypes = {
-  styles: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func]),
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The styles you want to apply globally.
+   */
+  styles: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.number,
+    PropTypes.object,
+    PropTypes.shape({
+      __emotion_styles: PropTypes.any.isRequired,
+    }),
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
 };
+
+export default GlobalStyles;