docs(Link): fix typings in react-router example. Fixes mui#32306

aaarichter · Jun 13, 2022 · fa590e9 · fa590e9
1 parent 60eaa3b
commit fa590e9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 6 deletions.
diff --git a/docs/data/material/guides/routing/routing-pt.md b/docs/data/material/guides/routing/routing-pt.md
@@ -16,7 +16,13 @@ Você também pode fazer com que um botão execute ações de navegação. For i
 
 Em aplicações da vida real, usar um elemento `<a>` nativo é raramente o suficiente. Você pode melhorar a experiência do usuário usando sistematicamente um componente Link aprimorado. For instance, with react-router: The theme of Material UI allows configuring this component once. For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -31,7 +37,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {

diff --git a/docs/data/material/guides/routing/routing-zh.md b/docs/data/material/guides/routing/routing-zh.md
@@ -16,7 +16,13 @@ You can also make a button perform navigation actions. You can also make a butto
 
 In real-life applications, using a native `<a>` element is rarely enough. element is rarely enough. You can improve the user experience by using an enhanced Link component systematically. The theme of Material UI allows configuring this component once. For instance, with react-router: The theme of MUI allows configuring this component once. For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -31,7 +37,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {

diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md
@@ -23,7 +23,13 @@ You can improve the user experience by using an enhanced Link component systemat
 The theme of MUI allows configuring this component once.
 For instance, with react-router:
 
-```jsx
+```tsx
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from 'react-router-dom';
+import { LinkProps } from '@mui/material/Link';
+
 const LinkBehavior = React.forwardRef<
   any,
   Omit<RouterLinkProps, 'to'> & { href: RouterLinkProps['to'] }
@@ -38,7 +44,7 @@ const theme = createTheme({
     MuiLink: {
       defaultProps: {
         component: LinkBehavior,
-      },
+      } as LinkProps,
     },
     MuiButtonBase: {
       defaultProps: {