fix(mui): render Breadcrumb links as MUI Link so styling applies

.changeset/mui-breadcrumb-link-styling.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/mui": patch
+---
+
+fix(mui): render `Breadcrumb` links as a MUI `Link` so styling is applied
+
+The internal `LinkRouter` helper in `@refinedev/mui`'s `Breadcrumb` spread MUI `Link` props (`sx`, `underline`, `color`, `variant`) onto a bare native `<span>`, so none of them had any effect. As a result breadcrumb links weren't flex-aligned with their icons, got no hover underline, didn't inherit color, and lost their typography size.
+
+`LinkRouter` now renders a real MUI `Link` (`component={LinkFromRouter}`), so the styling props are consumed by MUI while client-side routing via `to` is preserved. This also removes the previously-unused `Link as MuiLink` import that had been dead since the v5 migration.

packages/mui/src/components/breadcrumb/index.spec.tsx

@@ -1,6 +1,9 @@
+import React from "react";
 import { vi } from "vitest";
 import { breadcrumbTests } from "@refinedev/ui-tests";
 
+import { render, TestWrapper, MockRouterProvider } from "@test";
+
 import { Breadcrumb } from "./";
 
 describe("Breadcrumb", () => {
@@ -9,4 +12,31 @@ describe("Breadcrumb", () => {
   });
 
   breadcrumbTests.bind(this)(Breadcrumb);
+
+  it("should render breadcrumb links as a MUI Link so styling props are applied", async () => {
+    const { container } = render(<Breadcrumb />, {
+      wrapper: TestWrapper({
+        routerProvider: MockRouterProvider({
+          pathname: "/posts/create",
+          resource: { name: "posts", list: "/posts", create: "/posts/create" },
+          action: "create",
+        }),
+        resources: [{ name: "posts", list: "/posts", create: "/posts/create" }],
+        routerInitialEntries: ["/posts/create"],
+      }),
+    });
+
+    const link = container.querySelector("a");
+
+    expect(link).toHaveAttribute("href", "/posts");
+    // The link must be a real MUI Link (component={LinkFromRouter}) so that
+    // `sx`, `underline`, `color` and `variant` are consumed by MUI instead of
+    // being dumped onto a plain <span> as invalid DOM attributes.
+    expect(link?.className).toContain("MuiLink-root");
+    // Guard against the regression: styling props must not leak into the DOM,
+    // and there must be no bare <span> wrapper carrying them.
+    expect(link).not.toHaveAttribute("underline");
+    expect(link).not.toHaveAttribute("sx");
+    expect(container.querySelector("span[underline]")).toBeNull();
+  });
 });

packages/mui/src/components/breadcrumb/index.tsx

@@ -38,9 +38,9 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   const LinkRouter = (props: LinkProps & { to?: string }) => {
     const { to, children, ...restProps } = props;
     return (
-      <Link to={to || ""}>
-        <span {...restProps}>{children}</span>
-      </Link>
+      <MuiLink component={Link} to={to || ""} {...restProps}>
+        {children}
+      </MuiLink>
     );
   };