diff --git a/docs/pages/api-docs/global-styles.js b/docs/pages/api-docs/global-styles.js new file mode 100644 index 00000000000000..6bdec72a6ca6ca --- /dev/null +++ b/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 ; +} + +Page.getInitialProps = () => { + const req = require.context( + 'docs/translations/api-docs/global-styles', + false, + /global-styles.*.json$/, + ); + const descriptions = mapApiPageTranslations(req); + + return { + descriptions, + pageContent: jsonPageContent, + }; +}; diff --git a/docs/pages/api-docs/global-styles.json b/docs/pages/api-docs/global-styles.json new file mode 100644 index 00000000000000..cbfaecce57ece8 --- /dev/null +++ b/docs/pages/api-docs/global-styles.json @@ -0,0 +1,18 @@ +{ + "props": { + "styles": { + "type": { + "name": "union", + "description": "func
| number
| object
| { __emotion_styles: any }
| string
| bool" + } + } + }, + "name": "GlobalStyles", + "styles": { "classes": [], "globalClasses": {}, "name": null }, + "spread": true, + "filename": "/packages/material-ui/src/GlobalStyles/GlobalStyles.js", + "inheritance": null, + "demos": "", + "styledComponent": true, + "cssComponent": false +} diff --git a/docs/src/pages/customization/how-to-customize/how-to-customize.md b/docs/src/pages/customization/how-to-customize/how-to-customize.md index e746db524b769a..b179e4eb1ff4c5 100644 --- a/docs/src/pages/customization/how-to-customize/how-to-customize.md +++ b/docs/src/pages/customization/how-to-customize/how-to-customize.md @@ -1,3 +1,7 @@ +--- +components: GlobalStyles +--- + # How to customize

You can easily customize the appearance of a Material-UI component.

diff --git a/docs/src/pagesApi.js b/docs/src/pagesApi.js index be3808f4f45bb5..b5857b34f4f1ad 100644 --- a/docs/src/pagesApi.js +++ b/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' }, diff --git a/docs/translations/api-docs/global-styles/global-styles-de.json b/docs/translations/api-docs/global-styles/global-styles-de.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-es.json b/docs/translations/api-docs/global-styles/global-styles-es.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-fr.json b/docs/translations/api-docs/global-styles/global-styles-fr.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-ja.json b/docs/translations/api-docs/global-styles/global-styles-ja.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-pt.json b/docs/translations/api-docs/global-styles/global-styles-pt.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-ru.json b/docs/translations/api-docs/global-styles/global-styles-ru.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles-zh.json b/docs/translations/api-docs/global-styles/global-styles-zh.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/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": {} +} diff --git a/docs/translations/api-docs/global-styles/global-styles.json b/docs/translations/api-docs/global-styles/global-styles.json new file mode 100644 index 00000000000000..c53a9a9eef06f3 --- /dev/null +++ b/docs/translations/api-docs/global-styles/global-styles.json @@ -0,0 +1,5 @@ +{ + "componentDescription": "", + "propDescriptions": { "styles": "The styles you want to apply globally." }, + "classDescriptions": {} +} diff --git a/packages/material-ui/src/GlobalStyles/GlobalStyles.d.ts b/packages/material-ui/src/GlobalStyles/GlobalStyles.d.ts index d8a286e869f595..eaf72bed48af70 100644 --- a/packages/material-ui/src/GlobalStyles/GlobalStyles.d.ts +++ b/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 -): React.ReactElement; +export default function GlobalStyles(props: GlobalStylesProps): React.ReactElement; diff --git a/packages/material-ui/src/GlobalStyles/GlobalStyles.js b/packages/material-ui/src/GlobalStyles/GlobalStyles.js index 7bf85f8b1273f7..e4e49eedc8daf1 100644 --- a/packages/material-ui/src/GlobalStyles/GlobalStyles.js +++ b/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 ; } 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;