[Link] Fix color transformation (#32045)

mui · Mar 31, 2022 · f01605c · f01605c
1 parent 2192809
commit f01605c
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
@@ -112,6 +112,7 @@ const Link = React.forwardRef(function Link(inProps, ref) {
     TypographyClasses,
     underline = 'always',
     variant = 'inherit',
+    sx,
     ...other
   } = props;
 
@@ -144,7 +145,7 @@ const Link = React.forwardRef(function Link(inProps, ref) {
 
   const ownerState = {
     ...props,
-    color,
+    color: sx?.color || color,
     component,
     focusVisible,
     underline,
@@ -157,13 +158,13 @@ const Link = React.forwardRef(function Link(inProps, ref) {
     <LinkRoot
       className={clsx(classes.root, className)}
       classes={TypographyClasses}
-      color={color}
       component={component}
       onBlur={handleBlur}
       onFocus={handleFocus}
       ref={handlerRef}
       ownerState={ownerState}
       variant={variant}
+      sx={{ color: colorTransformations[color] || color, ...sx }}
       {...other}
     />
   );

diff --git a/test/regressions/fixtures/Link/LinkColor.js b/test/regressions/fixtures/Link/LinkColor.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Link from '@mui/material/Link';
+
+export default function DeterminateLinearProgress() {
+  return (
+    <ThemeProvider
+      theme={createTheme({
+        components: {
+          MuiLink: {
+            styleOverrides: {
+              root: {
+                color: '#0068a9', // blue
+              },
+            },
+          },
+        },
+      })}
+    >
+      <Link href="#unknown">#0068a9</Link>
+      <Link href="#unknown" color="#ff5252">
+        #ff5252
+      </Link>
+      <Link href="#unknown" sx={{ color: '#ff5252' }}>
+        #ff5252
+      </Link>
+    </ThemeProvider>
+  );
+}