Container component does not accept React.ReactNode typed children

The Container component does not allow null or undefined as children since v4.10.2.

My component:

import React from "react";
import Container from "@material-ui/core/Container";

import Header from "./Header";

const Page: React.FC = ({ children }) => {
  return (
    <>
      <Header />
      <Container>{children}</Container>
    </>
  );
};

export default Page;

• 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 😯

Does not allow null or undefined children with this error message:

src/components/Page.tsx:10:45 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children: string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal; disableGutters?: boolean | undefined; fixed?: boolean | undefined; maxWidth?: false | ... 5 more ... | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
      Type 'undefined' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
  Overload 2 of 2, '(props: DefaultComponentProps<ContainerTypeMap<{}, "div">>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.
      Type 'undefined' is not assignable to type 'string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal'.

10       <Container>{children}</Container>
                                               ~~~~~~~~~~

  node_modules/@material-ui/core/Container/Container.d.ts:6:5
    6     children: NonNullable<React.ReactNode>;
          ~~~~~~~~
    The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { component: ElementType<any>; } & { children: string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... 1 more ... | (new (props: any) => Component<...>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal; disableGu...'
  node_modules/@material-ui/core/Container/Container.d.ts:6:5
    6     children: NonNullable<React.ReactNode>;
          ~~~~~~~~
    The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & { children: string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal; disableGutters?: boolean | undefined; fixed?:...'


Found 1 error.

Expected Behavior 🤔

Maybe the API and/or use case has changed, but I think it should accept null or undefined as children.

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	16.13.1
TypeScript	3.9.6

[yuyokk]

Hey team,

getting the same

import { Container } from "@material-ui/core";
import React from "react";

interface Props {
  children?: React.ReactNode;
}

function CustomContainer({ children }: Props) {
  return <Container>{children}</Container>;
}

export default function App() {
  return (
    <CustomContainer>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </CustomContainer>
  );
}

  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children: boolean | ReactChild | ReactFragment | ReactPortal; disableGutters?: boolean | undefined; fixed?: boolean | undefined; maxWidth?: false | ... 5 more ... | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'boolean | ReactChild | ReactFragment | ReactPortal'.
      Type 'undefined' is not assignable to type 'boolean | ReactChild | ReactFragment | ReactPortal'.
  Overload 2 of 2, '(props: DefaultComponentProps<ContainerTypeMap<{}, "div">>): Element', gave the following error.
    Type 'ReactNode' is not assignable to type 'boolean | ReactChild | ReactFragment | ReactPortal'.  TS2769

example Sandbox https://codesandbox.io/s/relaxed-dan-oujgp?file=/src/App.tsx

[l3m]

Apparently, this also lead to changes in docs:

https://v4-9-14.material-ui.com/api/container/ contains children , but https://v4-10-2.material-ui.com/api/container/ (and 4.11) doesn’t list it anymore.