[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline

[nickylogan]

The classes property is missing from the prop type of CssBaseline and ScopedCssBaseline, while the docs mentioned that the prop should exist: ScopedCssBaseline API and CssBaseline API

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

Current Behavior 😯

const useStyles = makeStyles({
  root: {
    background: "yellow"
  }
});

export default function App() {
  const classes = useStyles();
  return (
    <>
      <ScopedCssBaseline classes={{ root: classes.root }}>
        <Typography>Hello from scoped!</Typography>
      </ScopedCssBaseline>
    </>
  );
}

This example fails the type checking, saying that the classes property doesn't exist.

Expected Behavior 🤔

The previous example should work.

Steps to Reproduce 🕹

https://codesandbox.io/s/polished-leftpad-mmkyz

Steps:

1. Create a new React project with material-ui v4.9.7 as a dependency
2. Create a component like the one in the example.
3. A type error should appear.

Context 🔦

I'm trying to add an MUI app to an existing website and don't want to break the styling of the page. ScopedCssBaseline is apparently the solution, but I needed to tweak the base styles.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.7
React	16.3.1
TypeScript	3.7.2
@types/react	16.9.26

[eps1lon]

Thanks for reporting this. They do indeed implement this prop but it doesn't have any effect since they don't implement any classNames.

[oliviertassinari]

@nickylogan Thank you for reporting this issue. What do you think of this fix? Do you want to work on a pull request :)?

diff --git a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
index a77f45a18..b220e5ffb 100644
--- a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
+++ b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.d.ts
@@ -1,9 +1,15 @@
 import * as React from 'react';
+import { StandardProps } from '..';

-export interface ScopedCssBaselineProps {
+export interface ScopedCssBaselineProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ScopedCssBaselineClassKey> {
+  /**
+   * The content of the component.
+   */
   children?: React.ReactNode;
 }

+export type ScopedCssBaselineClassKey = 'root';
 /**
  *
  * Demos:
@@ -14,8 +20,4 @@ export interface ScopedCssBaselineProps {
  *
  * - [ScopedCssBaseline API](https://material-ui.com/api/scoped-css-baseline/)
  */
-declare const ScopedCssBaseline: React.ComponentType<ScopedCssBaselineProps>;
-
-export type ScopedCssBaselineClassKey = 'root';
-
-export default ScopedCssBaseline;
+export default function ScopedCssBaseline(props: ScopedCssBaselineProps): JSX.Element;
diff --git a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js
index ec369c5d5..c4889e5a1 100644
--- a/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js
+++ b/packages/material-ui/src/ScopedCssBaseline/ScopedCssBaseline.js
@@ -25,6 +25,10 @@ const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(props, ref
 });

 ScopedCssBaseline.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
   /**
    * The content of the component.
    */

[eps1lon]

@oliviertassinari This would only cover ScopedCSssBaseline. This does not solve the issue for CssBaseline which is a docs-only issue.

[oliviertassinari]

I don't understand the issue with CssBaseline. But I haven't looked much into it. I have stopped at:

I'm trying to add an MUI app to an existing website and don't want to break the styling of the page. ScopedCssBaseline is apparently the solution, but I needed to tweak the base styles.

[eps1lon]

The docs say CssBaseline has a classes prop. This prop has no effect for that component.

[nickylogan]

The docs say CssBaseline has a classes prop. This prop has no effect for that component.

Just looked at the implementation, I think so too. In this line, it doesn't seem that the classes prop is being used at all.

[oliviertassinari]

@eps1lon Thanks for the details. I guess we could move forward with

diff --git a/docs/pages/api-docs/css-baseline.md b/docs/pages/api-docs/css-baseline.md
index 515c266ce..6809b1bbb 100644
--- a/docs/pages/api-docs/css-baseline.md
+++ b/docs/pages/api-docs/css-baseline.md
@@ -25,7 +25,6 @@ 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 [C
SS API](#css) below for more details. |

 The component cannot hold a ref.

@@ -41,7 +40,6 @@ The component cannot hold a ref.

 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).

diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
index 1c93cd386..5b2602df5 100644
--- a/docs/src/modules/utils/generateMarkdown.js
+++ b/docs/src/modules/utils/generateMarkdown.js
@@ -378,8 +378,12 @@ ${text}

 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).
+${
+  reactAPI.styles.classes.filter((styleRule) => styleRule.indexOf('@') !== 0).length > 0
+    ? `- 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](${SOURCE_CODE_ROOT_URL}${normalizePath(
diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index 095cd96f9..54ac2a159 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -58,8 +58,7 @@ CssBaseline.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * Override or extend the styles applied to the component.
-   * See [CSS API](#css) below for more details.
+   * @ignore
    */
   classes: PropTypes.object,
 };

[eps1lon]

Fixed with #20310 and #22297 for our v5 docs.