[ScopedCssBaseline] Allow css to be only applied on children (#19669)

docs/pages/api/css-baseline.md

@@ -25,10 +25,28 @@ Kickstart an elegant, consistent, and simple baseline to build upon.
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> | <span class="prop-default">null</span> | You can wrap a node. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 
 The component cannot hold a ref.
 
 
+## CSS
+
+- Style sheet name: `MuiCssBaseline`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">@global</span> | | Apply global styles.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/CssBaseline/CssBaseline.js) for more detail.
+
 ## Demos
 
 - [Css Baseline](/components/css-baseline/)

docs/pages/api/input-base.md

@@ -66,6 +66,7 @@ Any other props supplied will be provided to the root element (native element).
 
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
+| <span class="prop-name">@global</span> | | Apply global styles.
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiInputBase-root</span> | Styles applied to the root element.
 | <span class="prop-name">formControl</span> | <span class="prop-name">.MuiInputBase-formControl</span> | Styles applied to the root element if the component is a descendant of `FormControl`.
 | <span class="prop-name">focused</span> | <span class="prop-name">.Mui-focused</span> | Styles applied to the root element if the component is focused.

docs/pages/api/scoped-css-baseline.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './scoped-css-baseline.md';
+
+export default function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}

docs/pages/api/scoped-css-baseline.md

@@ -0,0 +1,54 @@
+---
+filename: /packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# ScopedCssBaseline API
+
+<p class="description">The API documentation of the ScopedCssBaseline React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
+// or
+import { ScopedCssBaseline } from '@material-ui/core';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+- Style sheet name: `MuiScopedCssBaseline`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiScopedCssBaseline-root</span> | Styles applied to the root element.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js) for more detail.
+
+## Demos
+
+- [Css Baseline](/components/css-baseline/)
+

docs/src/modules/utils/generateMarkdown.js

@@ -342,8 +342,11 @@ function generateClasses(reactAPI) {
   text = `| Rule name | Global class | Description |
 |:-----|:-------------|:------------|\n`;
   text += reactAPI.styles.classes
-    .filter(cls => cls !== '@global')
     .map(styleRule => {
+      if (styleRule === '@global') {
+        return '| <span class="prop-name">@global</span> | | Apply global styles.';
+      }
+
       const description = reactAPI.styles.descriptions[styleRule];
 
       if (typeof description === 'undefined' && ['Grid', 'Paper'].indexOf(reactAPI.name) === -1) {

docs/src/pages/components/css-baseline/css-baseline.md

@@ -1,11 +1,13 @@
 ---
-components: CssBaseline
+components: CssBaseline, ScopedCssBaseline
 ---
 
 # CSS Baseline
 
 <p class="description">Material-UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.</p>
 
+## Global reset
+
 You might be familiar with [normalize.css](https://github.com/necolas/normalize.css), a collection of HTML element and attribute style-normalizations.
 
 ```jsx
@@ -22,6 +24,24 @@ export default function MyApp() {
 }
 ```
 
+## Scoping on children
+
+However, you might be progressively migrating a website to Material-UI, using a global reset might not be an option.
+It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component.
+
+```jsx
+import React from 'react';
+import ScopedCssBaseline from '@material-ui/core/ScopedCssBaseline';
+
+export default function MyApp() {
+  return (
+    <ScopedCssBaseline>
+      {/* The rest of your application */}
+    </ScopedCssBaseline>
+  );
+}
+```
+
 ## Approach
 
 ### Page
@@ -43,6 +63,5 @@ which ensures that the declared width of the element is never exceeded due to pa
 - No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).
 You can learn more about the implications of changing the `<html>` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page.
 - Set the `theme.typography.body2` style on the `<body>` element.
-- Set the font-weight to "bolder" for the `<b>` and `<strong>` elements.
-  Bolder is one font weight heavier than the parent element (among the available weights of the font).
+- Set the font-weight to `theme.typography.fontWeightBold` for the `<b>` and `<strong>` elements.
 - Font antialiasing is enabled for better display of the Roboto font.

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

@@ -1,50 +1,54 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import makeStyles from '../styles/makeStyles';
+import withStyles from '../styles/withStyles';
 import { exactProp } from '@material-ui/utils';
 
-const useStyles = makeStyles(
-  theme => ({
-    '@global': {
-      html: {
-        WebkitFontSmoothing: 'antialiased', // Antialiasing.
-        MozOsxFontSmoothing: 'grayscale', // Antialiasing.
-        // Change from `box-sizing: content-box` so that `width`
-        // is not affected by `padding` or `border`.
-        boxSizing: 'border-box',
-      },
-      '*, *::before, *::after': {
-        boxSizing: 'inherit',
-      },
-      'strong, b': {
-        fontWeight: 'bolder',
-      },
-      body: {
-        margin: 0, // Remove the margin in all browsers.
-        color: theme.palette.text.primary,
-        ...theme.typography.body2,
+export const html = {
+  WebkitFontSmoothing: 'antialiased', // Antialiasing.
+  MozOsxFontSmoothing: 'grayscale', // Antialiasing.
+  // Change from `box-sizing: content-box` so that `width`
+  // is not affected by `padding` or `border`.
+  boxSizing: 'border-box',
+};
+
+export const body = theme => ({
+  color: theme.palette.text.primary,
+  ...theme.typography.body2,
+  backgroundColor: theme.palette.background.default,
+  '@media print': {
+    // Save printer ink.
+    backgroundColor: theme.palette.common.white,
+  },
+});
+
+export const styles = theme => ({
+  '@global': {
+    html,
+    '*, *::before, *::after': {
+      boxSizing: 'inherit',
+    },
+    'strong, b': {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+    body: {
+      margin: 0, // Remove the margin in all browsers.
+      ...body(theme),
+      // Add support for document.body.requestFullScreen().
+      // Other elements, if background transparent, are not supported.
+      '&::backdrop': {
         backgroundColor: theme.palette.background.default,
-        '@media print': {
-          // Save printer ink.
-          backgroundColor: theme.palette.common.white,
-        },
-        // Add support for document.body.requestFullScreen().
-        // Other elements, if background transparent, are not supported.
-        '&::backdrop': {
-          backgroundColor: theme.palette.background.default,
-        },
       },
     },
-  }),
-  { name: 'MuiCssBaseline' },
-);
+  },
+});
 
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
 function CssBaseline(props) {
-  const { children = null } = props;
-  useStyles();
+  /* eslint-disable no-unused-vars */
+  const { children = null, classes } = props;
+  /* eslint-enable no-unused-vars */
   return <React.Fragment>{children}</React.Fragment>;
 }
 
@@ -53,11 +57,16 @@ CssBaseline.propTypes = {
    * You can wrap a node.
    */
   children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
 };
 
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
 }
 
-export default CssBaseline;
+export default withStyles(styles, { name: 'MuiCssBaseline' })(CssBaseline);

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface ScopedCssBaselineProps {
+  children?: React.ReactElement;
+}
+
+declare const ScopedCssBaseline: React.ComponentType<ScopedCssBaselineProps>;
+
+export type ScopedCssBaselineClassKey = 'root';
+
+export default ScopedCssBaseline;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { withStyles } from '@material-ui/core/styles';
+import { html, body } from '../CssBaseline/CssBaseline';
+
+export const styles = theme => ({
+  /* Styles applied to the root element. */
+  root: {
+    ...html,
+    ...body(theme),
+    '& *, & *::before, & *::after': {
+      boxSizing: 'inherit',
+    },
+    '& strong, & b': {
+      fontWeight: theme.typography.fontWeightBold,
+    },
+  },
+});
+
+const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(props, ref) {
+  const { classes, className, ...other } = props;
+
+  return <div className={clsx(classes.root, className)} ref={ref} {...other} />;
+});
+
+ScopedCssBaseline.propTypes = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   * See [CSS API](#css) below for more details.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'MuiScopedCssBaseline' })(ScopedCssBaseline);

packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.test.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
+import ScopedCssBaseline from './ScopedCssBaseline';
+import describeConformance from '../test-utils/describeConformance';
+
+describe('<ScopedCssBaseline />', () => {
+  let mount;
+  let classes;
+
+  before(() => {
+    mount = createMount({ strict: true });
+    classes = getClasses(<ScopedCssBaseline />);
+  });
+
+  after(() => {
+    mount.cleanUp();
+  });
+
+  describeConformance(<ScopedCssBaseline />, () => ({
+    classes,
+    inheritComponent: 'div',
+    mount,
+    refInstanceof: window.HTMLDivElement,
+    skip: ['componentProp'],
+  }));
+});

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

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

packages/material-ui/src/ScopedCssBaseline/index.js

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