[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline #20310

nickylogan · 2020-03-28T07:02:51Z

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:

Create a new React project with material-ui v4.9.7 as a dependency
Create a component like the one in the example.
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 · 2020-03-28T08:28:04Z

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 · 2020-03-29T22:52:50Z

@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 · 2020-03-29T22:58:16Z

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

oliviertassinari · 2020-03-29T23:07:43Z

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 · 2020-03-29T23:56:14Z

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

nickylogan · 2020-03-30T02:33:55Z

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 · 2020-03-30T14:51:49Z

@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 added component: CssBaseline docs labels Mar 28, 2020

oliviertassinari added good first issue typescript and removed docs labels Mar 29, 2020

eps1lon added the docs label Mar 29, 2020

oliviertassinari mentioned this issue Mar 30, 2020

[core] Batch of small changes #20349

Merged

mui-org / material-ui

[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline #20310

[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline #20310

nickylogan commented Mar 28, 2020

eps1lon commented Mar 28, 2020

oliviertassinari commented Mar 29, 2020

eps1lon commented Mar 29, 2020

oliviertassinari commented Mar 29, 2020 •

edited

eps1lon commented Mar 29, 2020

nickylogan commented Mar 30, 2020 •

edited

oliviertassinari commented Mar 30, 2020

mui-org / material-ui

Sponsor mui-org/material-ui

Join GitHub today

[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline #20310

[Typescript] Missing classes prop for CssBaseline and ScopedCssBaseline #20310

Comments

nickylogan commented Mar 28, 2020

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

eps1lon commented Mar 28, 2020

oliviertassinari commented Mar 29, 2020

eps1lon commented Mar 29, 2020

oliviertassinari commented Mar 29, 2020 • edited

eps1lon commented Mar 29, 2020

nickylogan commented Mar 30, 2020 • edited

oliviertassinari commented Mar 30, 2020

oliviertassinari commented Mar 29, 2020 •

edited

nickylogan commented Mar 30, 2020 •

edited