chore(react-docsite-components): resolve issues related to React 18 types

mainframev · mainframev · commit 9de96afb7ec7 · 2025-03-26T20:26:30.000+01:00
diff --git a/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx b/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx
@@ -25,7 +25,7 @@ const styles = mergeStyleSets({
   },
 });
 
-export const AnimationDetail: React.FunctionComponent<IAnimationDetailProps> = props => {
+export const AnimationDetail: React.FunctionComponent<React.PropsWithChildren<IAnimationDetailProps>> = props => {
   const { animation, coreClass, reactVariable } = props;
 
   return (
diff --git a/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx b/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx
@@ -14,7 +14,7 @@ const styles = mergeStyleSets({
   },
 });
 
-export const AnimationDetailGrid: React.FunctionComponent<IAnimationDetailGridProps> = props => {
+export const AnimationDetailGrid: React.FunctionComponent<React.PropsWithChildren<IAnimationDetailGridProps>> = props => {
   return (
     <div className={styles.root}>
       {props.children.map((item: JSX.Element, i: number) => (
diff --git a/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx b/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx
@@ -182,17 +182,17 @@ export class ApiReferencesTable extends React.Component<IApiReferencesTableProps
 
     return title ? (
       // This heading must be programmatically focusable for simulating jumping to an anchor
-      <Text variant="xLarge" as="h3" styles={{ root: { marginTop: 0 } }} id={name} tabIndex={-1}>
+      (<Text variant="xLarge" as="h3" styles={{ root: { marginTop: 0 } }} id={name} tabIndex={-1}>
         {title}
-      </Text>
+      </Text>)
     ) : undefined;
   }
 }
 
 /**
  * Memoized DetailsList wrapper handling scenarios specific to API reference tables.
  */
-const ApiDetailsList: React.FunctionComponent<IApiDetailsListProps> = React.memo(props => {
+const ApiDetailsList: React.FunctionComponent<React.PropsWithChildren<IApiDetailsListProps>> = React.memo(props => {
   // Alphabetize the items and add a key to each one.
   const { itemKind, items, ariaLabel } = props;
   const processedItems: IApiEnumProperty[] | IApiInterfaceProperty[] | IMethod[] = useConst(() => {
diff --git a/packages/react-docsite-components/src/components/App/App.tsx b/packages/react-docsite-components/src/components/App/App.tsx
@@ -22,7 +22,7 @@ export interface IAppState {
 const getClassNames = classNamesFunction<IAppStyleProps, IAppStyles>();
 
 @withResponsiveMode
-export class AppBase extends React.Component<IAppProps, IAppState> {
+export class AppBase extends React.Component<React.PropsWithChildren<IAppProps>, IAppState> {
   public state: IAppState = { isMenuVisible: false, isMenuClosing: false };
   private _classNames: IProcessedStyleSet<IAppStyles>;
   private _showOnlyExamples: boolean;
@@ -211,7 +211,7 @@ function _findMatchingLink(links: INavLink[], path: string): INavLink | undefine
   }
 }
 
-export const App: React.FunctionComponent<IAppProps> = styled<IAppProps, IAppStyleProps, IAppStyles>(
+export const App: React.FunctionComponent<React.PropsWithChildren<IAppProps>> = styled<IAppProps, IAppStyleProps, IAppStyles>(
   AppBase,
   getStyles,
   undefined,
diff --git a/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx
@@ -79,7 +79,7 @@ const languageMapping: { [key: string]: string } = {
   css: 'scss',
 };
 
-const CodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
+const CodeSnippetBase: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = props => {
   const classNames = getClassNames(props.styles, { className: props.className });
   return (
     <SyntaxHighlighter
@@ -92,7 +92,7 @@ const CodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
   );
 };
 
-export const CodeSnippet: React.FunctionComponent<ICodeSnippetProps> = styled<
+export const CodeSnippet: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = styled<
   ICodeSnippetProps,
   ICodeSnippetStyleProps,
   ICodeSnippetStyles
diff --git a/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx b/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx
@@ -126,7 +126,9 @@ const languageMapping: { [key: string]: string } = {
   css: 'scss',
 };
 
-const PrismCodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
+const PrismCodeSnippetBase: React.FunctionComponent<
+  React.PropsWithChildren<React.PropsWithChildren<ICodeSnippetProps>>
+> = props => {
   const classNames = getClassNames(props.styles, {});
   return (
     <SyntaxHighlighter
@@ -140,7 +142,7 @@ const PrismCodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props =
   );
 };
 
-export const PrismCodeSnippet: React.FunctionComponent<ICodeSnippetProps> = styled<
+export const PrismCodeSnippet: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = styled<
   ICodeSnippetProps,
   ICodeSnippetStyleProps,
   ICodeSnippetStyles
diff --git a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
@@ -27,7 +27,7 @@ interface ICodepenPrefill {
   // and other options--see https://blog.codepen.io/documentation/api/prefill/
 }
 
-const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
+const CodepenComponentBase: React.FunctionComponent<React.PropsWithChildren<ICodepenProps>> = props => {
   const { jsContent = '', buttonAs: ButtonType = CommandButton, styles, theme } = props;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -94,7 +94,7 @@ const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
   );
 };
 
-export const CodepenComponent: React.FunctionComponent<ICodepenProps> = styled<
+export const CodepenComponent: React.FunctionComponent<React.PropsWithChildren<ICodepenProps>> = styled<
   ICodepenProps,
   ICodepenStyleProps,
   ICodepenStyles
diff --git a/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx b/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx
@@ -195,7 +195,7 @@ class ColorPaletteBase extends React.Component<IColorPaletteProps, IColorPalette
   };
 }
 
-export const ColorPalette: React.FunctionComponent<IColorPaletteProps> = styled<
+export const ColorPalette: React.FunctionComponent<React.PropsWithChildren<IColorPaletteProps>> = styled<
   IColorPaletteProps,
   IColorPaletteStyleProps,
   IColorPaletteStyles
diff --git a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx
@@ -313,7 +313,7 @@ function _idFromSectionTitle(title: string): string {
   return title.replace(/[^\w-]/g, '');
 }
 
-export const ComponentPage: React.FunctionComponent<IComponentPageProps> = styled<
+export const ComponentPage: React.FunctionComponent<React.PropsWithChildren<IComponentPageProps>> = styled<
   IComponentPageProps,
   IComponentPageStyleProps,
   IComponentPageStyles
diff --git a/packages/react-docsite-components/src/components/EditSection/EditSection.tsx b/packages/react-docsite-components/src/components/EditSection/EditSection.tsx
@@ -11,7 +11,7 @@ const getClassNames = classNamesFunction<IEditSectionStyleProps, IEditSectionSty
 /**
  * Component for displaying an edit button next to a section header.
  */
-export const EditSectionBase: React.FunctionComponent<IEditSectionProps> = props => {
+export const EditSectionBase: React.FunctionComponent<React.PropsWithChildren<IEditSectionProps>> = props => {
   const { className, section, title, url, styles, theme } = props;
 
   // Check if url is falsey.
@@ -38,7 +38,7 @@ export const EditSectionBase: React.FunctionComponent<IEditSectionProps> = props
   );
 };
 
-export const EditSection: React.FunctionComponent<IEditSectionProps> = styled<
+export const EditSection: React.FunctionComponent<React.PropsWithChildren<IEditSectionProps>> = styled<
   IEditSectionProps,
   IEditSectionStyleProps,
   IEditSectionStyles
diff --git a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx
@@ -164,7 +164,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
                   editorAriaLabel={`Editor for the example "${title}". The example will be updated as you type.`}
                   modelRef={this._monacoModelRef}
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  previewAs={ExamplePreview as any as React.FunctionComponent<{}>}
+                  previewAs={ExamplePreview as any as React.FunctionComponent<React.PropsWithChildren<unknown>>}
                 >
                   {children}
                 </EditorWrapper>
@@ -176,7 +176,6 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
                   }
                 </ExamplePreview>
               )}
-
               {this._getDosAndDonts()}
             </div>
           );
@@ -205,7 +204,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   private _getPreviewComponent = memoizeFunction(
-    (activeTheme: Theme | undefined, scheme: ISchemeNames): React.FunctionComponent => {
+    (activeTheme: Theme | undefined, scheme: ISchemeNames): React.FunctionComponent<React.PropsWithChildren> => {
       // Generate a component which renders the children with the current
       return props => {
         const { children } = props;
@@ -282,7 +281,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
   };
 }
 
-export const ExampleCard: React.FunctionComponent<IExampleCardProps> = styled<
+export const ExampleCard: React.FunctionComponent<React.PropsWithChildren<IExampleCardProps>> = styled<
   IExampleCardProps,
   IExampleCardStyleProps,
   IExampleCardStyles
diff --git a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx
@@ -139,7 +139,7 @@ export class FeedbackListBase extends React.Component<IFeedbackListProps, IFeedb
   };
 }
 
-export const FeedbackList: React.FunctionComponent<IFeedbackListProps> = styled<
+export const FeedbackList: React.FunctionComponent<React.PropsWithChildren<IFeedbackListProps>> = styled<
   IFeedbackListProps,
   IFeedbackListStyleProps,
   IFeedbackListStyles
diff --git a/packages/react-docsite-components/src/components/Header/Header.tsx b/packages/react-docsite-components/src/components/Header/Header.tsx
@@ -128,7 +128,7 @@ export class HeaderBase extends React.Component<IHeaderProps, IHeaderState> {
   };
 }
 
-export const Header: React.FunctionComponent<IHeaderProps> = styled<IHeaderProps, IHeaderStyleProps, IHeaderStyles>(
+export const Header: React.FunctionComponent<React.PropsWithChildren<IHeaderProps>> = styled<IHeaderProps, IHeaderStyleProps, IHeaderStyles>(
   HeaderBase,
   getStyles,
   undefined,
diff --git a/packages/react-docsite-components/src/components/Markdown/Markdown.tsx b/packages/react-docsite-components/src/components/Markdown/Markdown.tsx
@@ -36,7 +36,7 @@ const getStyles: IStyleFunction<IMarkdownStyleProps, IMarkdownStyles> = () => {
 
 const getClassNames = classNamesFunction<IMarkdownStyleProps, IMarkdownStyles>();
 
-const MarkdownBase: React.FunctionComponent<IMarkdownProps> = props => {
+const MarkdownBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownProps>> = props => {
   const { styles, theme, children } = props;
   const classNames = getClassNames(styles, { theme: theme! });
 
@@ -131,7 +131,7 @@ function getOverrides(subComponentStyles: IMarkdownSubComponentStyles, props: IM
   };
 }
 
-export const Markdown: React.FunctionComponent<IMarkdownProps> = styled<
+export const Markdown: React.FunctionComponent<React.PropsWithChildren<IMarkdownProps>> = styled<
   IMarkdownProps,
   IMarkdownStyleProps,
   IMarkdownStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx
@@ -31,7 +31,7 @@ const getStyles: IStyleFunction<IMarkdownCodeStyleProps, IMarkdownCodeStyles> =
 
 const getClassNames = classNamesFunction<IMarkdownCodeStyleProps, IMarkdownCodeStyles>();
 
-const MarkdownCodeBase: React.FunctionComponent<IMarkdownCodeProps> = props => {
+const MarkdownCodeBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownCodeProps>> = props => {
   const { className, styles, ...rest } = props;
   const classNames = getClassNames(styles);
 
@@ -43,7 +43,7 @@ const MarkdownCodeBase: React.FunctionComponent<IMarkdownCodeProps> = props => {
   return <code className={classNames.root}>{props.children}</code>;
 };
 
-export const MarkdownCode: React.FunctionComponent<IMarkdownCodeProps> = styled<
+export const MarkdownCode: React.FunctionComponent<React.PropsWithChildren<IMarkdownCodeProps>> = styled<
   IMarkdownCodeProps,
   IMarkdownCodeStyleProps,
   IMarkdownCodeStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx
@@ -87,7 +87,7 @@ const getStyles: IStyleFunction<IMarkdownHeaderStyleProps, IMarkdownHeaderStyles
 
 const getClassNames = classNamesFunction<IMarkdownHeaderStyleProps, IMarkdownHeaderStyles>();
 
-const MarkdownHeaderBase: React.FunctionComponent<IMarkdownHeaderProps> = props => {
+const MarkdownHeaderBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownHeaderProps>> = props => {
   const { as: RootType = 'h1', children, id, styles, className } = props;
 
   const classNames = getClassNames(styles, { as: RootType, className });
@@ -98,7 +98,7 @@ const MarkdownHeaderBase: React.FunctionComponent<IMarkdownHeaderProps> = props
   );
 };
 
-export const MarkdownHeader: React.FunctionComponent<IMarkdownHeaderProps> = styled<
+export const MarkdownHeader: React.FunctionComponent<React.PropsWithChildren<IMarkdownHeaderProps>> = styled<
   IMarkdownHeaderProps,
   IMarkdownHeaderStyleProps,
   IMarkdownHeaderStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link, ILinkProps } from '@fluentui/react/lib/Link';
 import { removeAnchorLink } from '../../utilities/index2';
 
-export const MarkdownLink: React.FunctionComponent<ILinkProps> = props => {
+export const MarkdownLink: React.FunctionComponent<React.PropsWithChildren<ILinkProps>> = props => {
   let href = props.href;
   const { underline = true } = props;
   if (href && href[0] === '#' && href.indexOf('/') === -1) {
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx
@@ -40,7 +40,7 @@ const getStyles: IStyleFunction<IMarkdownParagraphStyleProps, IMarkdownParagraph
 
 const getClassNames = classNamesFunction<IMarkdownParagraphStyleProps, IMarkdownParagraphStyles>();
 
-const MarkdownParagraphBase: React.FunctionComponent<IMarkdownParagraphProps> = props => {
+const MarkdownParagraphBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownParagraphProps>> = props => {
   const { children, theme } = props;
   const classNames: IClassNames<IMarkdownParagraphStyles> = getClassNames(props.styles, {
     theme: theme!,
@@ -50,7 +50,7 @@ const MarkdownParagraphBase: React.FunctionComponent<IMarkdownParagraphProps> =
   return <p className={classNames.root}>{children}</p>;
 };
 
-export const MarkdownParagraph: React.FunctionComponent<IMarkdownParagraphProps> = styled<
+export const MarkdownParagraph: React.FunctionComponent<React.PropsWithChildren<IMarkdownParagraphProps>> = styled<
   IMarkdownParagraphProps,
   IMarkdownParagraphStyleProps,
   IMarkdownParagraphStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx
@@ -8,7 +8,7 @@ export interface IMarkdownPreProps extends React.HTMLAttributes<HTMLPreElement>
   enableRenderHtmlBlock?: boolean;
 }
 
-export const MarkdownPre: React.FunctionComponent<IMarkdownPreProps> = props => {
+export const MarkdownPre: React.FunctionComponent<React.PropsWithChildren<IMarkdownPreProps>> = props => {
   const { children, enableRenderHtmlBlock, ...rest } = props;
 
   // markdown-to-jsx will render code blocks as <pre><code>code here</code></pre>.
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownCellBase extends React.PureComponent<IMarkdownTableCellProps> {
+export class MarkdownCellBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableCellProps>> {
   public render(): JSX.Element {
     const { as = 'td', children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTBodyBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTBodyBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTHeadBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTHeadBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTableBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTableBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, className, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTrBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTrBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx b/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
@@ -4,7 +4,7 @@ import { css, hiddenContentStyle } from '@fluentui/react';
 import { IBanner, IPageSectionPropsWithSectionName } from '../Page.types';
 import { Markdown } from '../../Markdown/index';
 
-export const BannerSection: React.FunctionComponent<IPageSectionPropsWithSectionName & IBanner> = props => {
+export const BannerSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionPropsWithSectionName & IBanner>> = props => {
   const { className, title = props.sectionName, content, style, id } = props;
   return (
     <div className={css(styles.banner, className)} style={style}>
diff --git a/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx b/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx
@@ -12,7 +12,7 @@ export interface IBestPracticesSectionProps extends IPageSectionPropsWithSection
   donts?: string;
 }
 
-export const BestPracticesSection: React.FunctionComponent<IBestPracticesSectionProps> = props => {
+export const BestPracticesSection: React.FunctionComponent<React.PropsWithChildren<IBestPracticesSectionProps>> = props => {
   const {
     className,
     fileNamePrefix,
diff --git a/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx b/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx
@@ -10,7 +10,7 @@ export interface IExamplesSectionProps extends IPageSectionPropsWithSectionName
   examples?: IExample[];
 }
 
-export const ExamplesSection: React.FunctionComponent<IExamplesSectionProps> = props => {
+export const ExamplesSection: React.FunctionComponent<React.PropsWithChildren<IExamplesSectionProps>> = props => {
   const { className, examples, exampleKnobs, readableSectionName = props.sectionName, style, id } = props;
   const [activeEditorTitle, setActiveEditorTitle] = React.useState('');
 
diff --git a/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx b/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx
@@ -4,7 +4,7 @@ import { css } from '@fluentui/react';
 import { IPageSectionPropsWithSectionName } from '../Page.types';
 import * as styles from '../Page.module.scss';
 
-export const FeedbackSection: React.FunctionComponent<IPageSectionPropsWithSectionName> = props => {
+export const FeedbackSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionPropsWithSectionName>> = props => {
   const { className, readableSectionName = props.sectionName, style, title, id } = props;
 
   return (
diff --git a/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx b/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx
@@ -15,7 +15,7 @@ export interface IImplementationSectionProps extends IPageSectionPropsWithSectio
   hideImplementationTitle?: boolean;
 }
 
-export const ImplementationSection: React.FunctionComponent<IImplementationSectionProps> = props => {
+export const ImplementationSection: React.FunctionComponent<React.PropsWithChildren<IImplementationSectionProps>> = props => {
   const {
     className,
     readableSectionName = props.sectionName,
@@ -38,7 +38,7 @@ export const ImplementationSection: React.FunctionComponent<IImplementationSecti
       {jsonDocs && (
         // In this context, the table shouldn't handle jumping to anchors, because Page delay-renders
         // its sections and the table shouldn't need to know about or handle that.
-        <ApiReferencesTableSet jsonDocs={jsonDocs} jumpToAnchors={false} />
+        (<ApiReferencesTableSet jsonDocs={jsonDocs} jumpToAnchors={false} />)
       )}
       {!jsonDocs && _getNativePropsInfo(props)}
       {!jsonDocs && <PropertiesTableSet sources={propertiesTablesSources} />}
diff --git a/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx b/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx
@@ -6,7 +6,7 @@ import { Markdown } from '../../Markdown/index';
 import { IPageSectionProps } from '../Page.types';
 import * as styles from '../Page.module.scss';
 
-export const MarkdownSection: React.FunctionComponent<IPageSectionProps> = props => {
+export const MarkdownSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionProps>> = props => {
   const {
     className,
     content: markdown,
diff --git a/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx b/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx
diff --git a/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx b/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx
diff --git a/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx b/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx
diff --git a/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx b/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx
diff --git a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx
diff --git a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx
diff --git a/packages/react-docsite-components/src/components/SideRail/SideRail.tsx b/packages/react-docsite-components/src/components/SideRail/SideRail.tsx
diff --git a/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx b/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx
diff --git a/packages/react-docsite-components/src/utilities/PlatformContext.tsx b/packages/react-docsite-components/src/utilities/PlatformContext.tsx
diff --git a/packages/react-docsite-components/src/utilities/createApp.tsx b/packages/react-docsite-components/src/utilities/createApp.tsx
diff --git a/packages/react-docsite-components/src/utilities/createDemoApp.tsx b/packages/react-docsite-components/src/utilities/createDemoApp.tsx
diff --git a/packages/react-docsite-components/src/utilities/router/Router.tsx b/packages/react-docsite-components/src/utilities/router/Router.tsx

Original file line number	Diff line number	Diff line change
`@@ -195,7 +195,7 @@ class ColorPaletteBase extends React.Component<IColorPaletteProps, IColorPalette`
`195`	`195`	`};`
`196`	`196`	`}`
`197`	`197`
`198`		`-export const ColorPalette: React.FunctionComponent<IColorPaletteProps> = styled<`
	`198`	`+export const ColorPalette: React.FunctionComponent<React.PropsWithChildren<IColorPaletteProps>> = styled<`
`199`	`199`	`IColorPaletteProps,`
`200`	`200`	`IColorPaletteStyleProps,`
`201`	`201`	`IColorPaletteStyles`
Original file line number	Diff line number	Diff line change
`@@ -313,7 +313,7 @@ function _idFromSectionTitle(title: string): string {`
`313`	`313`	`return title.replace(/[^\w-]/g, '');`
`314`	`314`	`}`
`315`	`315`
`316`		`-export const ComponentPage: React.FunctionComponent<IComponentPageProps> = styled<`
	`316`	`+export const ComponentPage: React.FunctionComponent<React.PropsWithChildren<IComponentPageProps>> = styled<`
`317`	`317`	`IComponentPageProps,`
`318`	`318`	`IComponentPageStyleProps,`
`319`	`319`	`IComponentPageStyles`