From a05a774c0673272cb1e7384b3b6c66c5f02b7140 Mon Sep 17 00:00:00 2001
From: Emma Indal <emma.indahl@gmail.com>
Date: Wed, 6 Oct 2021 13:58:27 +0200
Subject: [PATCH] fix styling issue when using Button component with variant
 contained

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
---
 .../src/components/Button/Button.tsx            | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx
index 0fbadc4dff..3e89421ef0 100644
--- a/packages/core-components/src/components/Button/Button.tsx
+++ b/packages/core-components/src/components/Button/Button.tsx
@@ -40,9 +40,20 @@ export type ButtonProps = MaterialButtonProps &
  */
 declare function ButtonType(props: ButtonProps): JSX.Element;
 
-const ActualButton = React.forwardRef<any, ButtonProps>((props, ref) => (
-  <MaterialButton ref={ref} component={Link} {...props} />
-)) as { (props: ButtonProps): JSX.Element };
+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} />
+  );
+}) as { (props: ButtonProps): JSX.Element };
 
 // TODO(Rugvip): We use this as a workaround to make the exported type be a
 //               function, which makes our API reference docs much nicer.