[docs] Migrate Breadcrumbs demos to emotion

[vicasas]

• I have followed (at least) the PR section of the contributing guide.

The following demos of the Breadcrumbs component were migrated:

• Custom separator
• Breadcrumbs with icons
• Customized breadcrumbs
• Integration with react-router

💄 A refactoring was done for the Custom Separator demo, I am left with the example code in view after dividing into different demos.

Related to #16947

[mui-pr-bot]

No bundle size changes

Generated by 🚫 dangerJS against 1753cc6

[vicasas]

The diferent detected for argos is for refactoring made in Custom Separator demo

[oliviertassinari]

While I appreciate the effort to breakdown the demos into 3 to enable the inline previews. I fear it's counterproductive in its application. We can no longer see the 3 differents separators at a slimps. I would propose this instead:

diff --git a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
index 23faf7970d..718c59f051 100644
--- a/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
+++ b/docs/src/pages/components/breadcrumbs/CustomSeparator.tsx
@@ -23,49 +23,36 @@ function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
 export default function CustomSeparator() {
   const classes = useStyles();

+  const breadcrumbs = [
+    <Link key="1" color="inherit" href="/" onClick={handleClick}>
+      Material-UI
+    </Link>,
+    <Link
+      key="2"
+      color="inherit"
+      href="/getting-started/installation/"
+      onClick={handleClick}
+    >
+      Core
+    </Link>,
+    <Typography key="3" color="textPrimary">
+      Breadcrumb
+    </Typography>,
+  ];
+
   return (
     <div className={classes.root}>
       <Breadcrumbs separator="›" aria-label="breadcrumb">
-        <Link color="inherit" href="/" onClick={handleClick}>
-          Material-UI
-        </Link>
-        <Link
-          color="inherit"
-          href="/getting-started/installation/"
-          onClick={handleClick}
-        >
-          Core
-        </Link>
-        <Typography color="textPrimary">Breadcrumb</Typography>
+        {breadcrumbs}
       </Breadcrumbs>
       <Breadcrumbs separator="-" aria-label="breadcrumb">
-        <Link color="inherit" href="/" onClick={handleClick}>
-          Material-UI
-        </Link>
-        <Link
-          color="inherit"
-          href="/getting-started/installation/"
-          onClick={handleClick}
-        >
-          Core
-        </Link>
-        <Typography color="textPrimary">Breadcrumb</Typography>
+        {breadcrumbs}
       </Breadcrumbs>
       <Breadcrumbs
         separator={<NavigateNextIcon fontSize="small" />}
         aria-label="breadcrumb"
       >
-        <Link color="inherit" href="/" onClick={handleClick}>
-          Material-UI
-        </Link>
-        <Link
-          color="inherit"
-          href="/getting-started/installation/"
-          onClick={handleClick}
-        >
+        {breadcrumbs}
       </Breadcrumbs>
       <Breadcrumbs
         separator={<NavigateNextIcon fontSize="small" />}
         aria-label="breadcrumb"
       >
-        <Link color="inherit" href="/" onClick={handleClick}>
-          Material-UI
-        </Link>
-        <Link
-          color="inherit"
-          href="/getting-started/installation/"
-          onClick={handleClick}
-        >
-          Core
-        </Link>
-        <Typography color="textPrimary">Breadcrumb</Typography>
+        {breadcrumbs}
       </Breadcrumbs>
     </div>
   );
diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs.md b/docs/src/pages/components/breadcrumbs/breadcrumbs.md
index 5c87a84247..efed34cfdd 100644
--- a/docs/src/pages/components/breadcrumbs/breadcrumbs.md
+++ b/docs/src/pages/components/breadcrumbs/breadcrumbs.md
@@ -23,7 +23,7 @@ Keep the last breadcrumb interactive.

 ## Custom separator

-In the following examples, we are using two string separators, and an SVG icon.
+In the following examples, we are using two string separators and an SVG icon.

 {{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}}

[vicasas]

I review tomorrow

[vicasas]

I would propose this instead:

Woooow! look better! 😄