diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx
index 3e89421ef0..a44c5df148 100644
--- a/packages/core-components/src/components/Button/Button.tsx
+++ b/packages/core-components/src/components/Button/Button.tsx
@@ -40,19 +40,19 @@ export type ButtonProps = MaterialButtonProps &
  */
 declare function ButtonType(props: ButtonProps): JSX.Element;
 
+/**
+ * This wrapper is here to reset the color of the Link and make typescript happy.
+ */
+const LinkWrapper = (props: LinkProps) => <Link {...props} color="initial" />;
+
 const ActualButton = React.forwardRef<any, ButtonProps>((props, ref) => {
   /**
     This temporarily fixes a bug in material-ui where the color of the Link
     overrides the color of the button
     https://github.com/mui-org/material-ui/issues/28852
   */
-  let color;
-  if (props.variant === 'contained') {
-    color = 'white';
-  }
-  return (
-    <MaterialButton ref={ref} component={Link} style={{ color }} {...props} />
-  );
+
+  return <MaterialButton ref={ref} component={LinkWrapper} {...props} />;
 }) as { (props: ButtonProps): JSX.Element };
 
 // TODO(Rugvip): We use this as a workaround to make the exported type be a