[CssBaseline] API docs do not mention stylesheet name

[cmeeren]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

My understanding is the stylesheet names that can be provided to theme.overrides are the stylesheet names specified in each component's API docs. For example, here in the Checkbox API docs:

The Customization/Theming/Typography docs says that:

In order to globally define Raleway as a font face the CssBaseline component needs to be used.

However, the CssBaseline API docs do not mention any style sheet name, so I'm confused whether my understanding is correct and this is a doc issue, or if the possible overrides style sheet names are in fact defined elsewhere (I haven't found anything).

This may be relevant for other components, too (there are quite a few whose API docs do not have the CSS heading and thus no stylesheet name).

[oliviertassinari]

This is a documentation issue. Addressing it shouldn't be too hard. We could just say that the component applies some global style. It does support the themes.overrides.MuiCssBaseline.

[oliviertassinari]

Ok, in this case, we might want to stick to the withStyles API to keep the markdown generation work, and to ignore @global as a key we want to document:

diff --git a/docs/scripts/buildApi.js b/docs/scripts/buildApi.js
index 2cb481bb9..def22c6d1 100644
--- a/docs/scripts/buildApi.js
+++ b/docs/scripts/buildApi.js
@@ -102,7 +102,7 @@ async function buildDocs(options) {
   if (component.styles && component.default.options) {
     // Collect the customization points of the `classes` property.
     styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter(
-      className => !className.match(/^(@media|@keyframes)/),
+      className => !className.match(/^(@media|@keyframes|@global)/),
     );
     styles.name = component.default.options.name;
     styles.globalClasses = styles.classes.reduce((acc, key) => {
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index 5695fda10..c90e27e44 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -1,50 +1,46 @@
 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',
+export const styles = 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,
+      backgroundColor: theme.palette.background.default,
+      '@media print': {
+        // Save printer ink.
+        backgroundColor: theme.palette.common.white,
       },
-      body: {
-        margin: 0, // Remove the margin in all browsers.
-        color: theme.palette.text.primary,
-        ...theme.typography.body2,
+      // 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();
   return <React.Fragment>{children}</React.Fragment>;
 }

@@ -58,6 +54,9 @@ CssBaseline.propTypes = {
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
   CssBaseline['propTypes' + ''] = exactProp(CssBaseline.propTypes);
+  CssBaseline.options = {
+    name: 'MuiCssBaseline',
+  };
 }

-export default CssBaseline;
+export default withStyles(styles, { name: 'MuiCssBaseline' })(CssBaseline);

[hefedev]

@oliviertassinari I'd like to finalize this. Although clearly the hard lifting is already done. :)

[oliviertassinari]

Hum, I'm not sure what I have proposed is the best solution. Did you investigate it?

[hefedev]

Hm I thought it said it's a document issues, I missed the need for investigation. And now have to pass. I am not familiar with code base.