fix(components): add component as prop (#10)

* fix(components): add component as prop * chore(cleaning): reorder code
APISuite · Nov 12, 2021 · 1dcfce6 · 1dcfce6
1 parent f2d1455
commit 1dcfce6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/lib/components/Button/Button.tsx b/lib/components/Button/Button.tsx
@@ -1,9 +1,13 @@
 import React, { FC } from "react";
-import { Button as Btn, ButtonProps, makeStyles, useTheme } from "@material-ui/core";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import MuiButton , { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";
 import clsx from "clsx";
 
-export const Button: FC<{ rounded?: boolean } & ButtonProps> = ({
-  children,
+interface Props {
+  rounded?: boolean;
+}
+
+export const Button: FC<Props & MuiButtonProps<React.ElementType, { component?: React.ElementType }>> = ({
   className,
   rounded = false,
   ...rest
@@ -18,8 +22,6 @@ export const Button: FC<{ rounded?: boolean } & ButtonProps> = ({
   const classes = useStyles();
 
   return (
-    <Btn {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })}>
-      {children}
-    </Btn>
+    <MuiButton {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })} />
   );
 };
diff --git a/lib/components/ButtonBase/ButtonBase.tsx b/lib/components/ButtonBase/ButtonBase.tsx
@@ -1,9 +1,13 @@
 import React, { FC } from "react";
-import { ButtonBase as Btn, ButtonBaseProps, makeStyles, useTheme } from "@material-ui/core";
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import MuiButtonBase, { ButtonBaseProps as MuiButtonBaseProps } from "@material-ui/core/ButtonBase";
 import clsx from "clsx";
 
-export const ButtonBase: FC<{ rounded?: boolean } & ButtonBaseProps> = ({
-  children,
+interface Props {
+  rounded?: boolean;
+}
+
+export const ButtonBase: FC<Props & MuiButtonBaseProps<React.ElementType, { component?: React.ElementType }>> = ({
   className,
   rounded = false,
   ...rest
@@ -18,8 +22,6 @@ export const ButtonBase: FC<{ rounded?: boolean } & ButtonBaseProps> = ({
   const classes = useStyles();
 
   return (
-    <Btn {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })}>
-      {children}
-    </Btn>
+    <MuiButtonBase {...rest} className={clsx(className, { [classes.rounded]: rounded || custom?.button?.rounded })} />
   );
 };