[docs] Fix element.ref accessing warning on docs (#45155)

Author: DiegoAndai

examples/material-ui-nextjs-pages-router-ts/src/Link.tsx

@@ -3,10 +3,6 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
-import { styled } from '@mui/material/styles';
-
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = styled('a')({});
 
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
@@ -17,17 +13,7 @@ interface NextLinkComposedProps
 
 export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const {
-      to,
-      linkAs,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      legacyBehavior = true,
-      locale,
-      ...other
-    } = props;
+    const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
     return (
       <NextLink
@@ -39,10 +25,9 @@ export const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComp
         shallow={shallow}
         passHref
         locale={locale}
-        legacyBehavior={legacyBehavior}
-      >
-        <Anchor ref={ref} {...other} />
-      </NextLink>
+        ref={ref}
+        {...other}
+      />
     );
   },
 );
@@ -64,7 +49,6 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     as,
     className: classNameProps,
     href,
-    legacyBehavior,
     linkAs: linkAsProp,
     locale,
     noLinkStyle,
@@ -90,7 +74,6 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,
     scroll,
     shallow,
     prefetch,
-    legacyBehavior,
     locale,
   };
 

examples/material-ui-nextjs-pages-router/src/Link.js

@@ -3,23 +3,9 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink from 'next/link';
 import MuiLink from '@mui/material/Link';
-import { styled } from '@mui/material/styles';
-
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = styled('a')({});
 
 export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) {
-  const {
-    to,
-    linkAs,
-    replace,
-    scroll,
-    shallow,
-    prefetch,
-    legacyBehavior = true,
-    locale,
-    ...other
-  } = props;
+  const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
   return (
     <NextLink
@@ -30,11 +16,10 @@ export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props
       scroll={scroll}
       shallow={shallow}
       passHref
-      legacyBehavior={legacyBehavior}
       locale={locale}
-    >
-      <Anchor ref={ref} {...other} />
-    </NextLink>
+      ref={ref}
+      {...other}
+    />
   );
 });
 
@@ -46,7 +31,6 @@ const Link = React.forwardRef(function Link(props, ref) {
     as,
     className: classNameProps,
     href,
-    legacyBehavior,
     linkAs: linkAsProp,
     locale,
     noLinkStyle,
@@ -72,7 +56,6 @@ const Link = React.forwardRef(function Link(props, ref) {
     scroll,
     shallow,
     prefetch,
-    legacyBehavior,
     locale,
   };
 

packages/mui-docs/src/Link/Link.tsx

@@ -3,21 +3,16 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
 import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
-import { styled } from '@mui/material/styles';
 import { useUserLanguage } from '../i18n';
 import { useDocsConfig } from '../DocsProvider';
 
 /**
  * File to keep in sync with:
  *
- * - /docs/src/modules/components/Link.tsx
  * - /examples/material-ui-nextjs-pages-router/src/Link.js
  * - /examples/material-ui-nextjs-pages-router-ts/src/Link.tsx
  */
 
-// Add support for the sx prop for consistency with the other branches.
-const Anchor = styled('a')({});
-
 interface NextLinkComposedProps
   extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>,
     Omit<NextLinkProps, 'href' | 'as' | 'passHref' | 'onMouseEnter' | 'onClick' | 'onTouchStart'> {
@@ -27,17 +22,7 @@ interface NextLinkComposedProps
 
 const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedProps>(
   function NextLinkComposed(props, ref) {
-    const {
-      to,
-      linkAs,
-      replace,
-      scroll,
-      shallow,
-      prefetch,
-      legacyBehavior = true,
-      locale,
-      ...other
-    } = props;
+    const { to, linkAs, replace, scroll, shallow, prefetch, locale, ...other } = props;
 
     return (
       <NextLink
@@ -49,10 +34,10 @@ const NextLinkComposed = React.forwardRef<HTMLAnchorElement, NextLinkComposedPro
         shallow={shallow}
         passHref
         locale={locale}
-        legacyBehavior={legacyBehavior}
-      >
-        <Anchor data-no-markdown-link="true" ref={ref} {...other} />
-      </NextLink>
+        data-no-markdown-link="true"
+        ref={ref}
+        {...other}
+      />
     );
   },
 );
@@ -74,7 +59,6 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link
     as,
     className: classNameProps,
     href,
-    legacyBehavior,
     linkAs: linkAsProp,
     locale,
     noLinkStyle,
@@ -116,7 +100,6 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link
     replace,
     scroll,
     shallow,
-    legacyBehavior,
     prefetch,
     locale,
   };