Changing button

package.json

@@ -19,6 +19,7 @@
     "author": "The Nerdy Canuck",
     "license": "MIT",
     "devDependencies": {
+        "@types/node": "^17.0.1",
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "react": "^17.0.2",

src/components/Button.tsx

@@ -3,21 +3,19 @@ import React from 'react';
 export interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     backgroundColor?: string;
     color?: string;
-    style?: React.CSSProperties;
 }
 
 export const Button: React.FunctionComponent<IButtonProps> = (props) => {
-    const { children, backgroundColor, style } = props;
+    const { children, backgroundColor, color, style } = props;
+
+    let _style = style;
+
+    /** Override Defaults */
+    if (backgroundColor && _style) _style.backgroundColor = backgroundColor;
+    if (color && _style) _style.color = color;
 
     return (
-        <button
+        <button style={_style} {...props}>
-            style={{
-                ...style,
-                backgroundColor: backgroundColor || 'black',
-                color: 'white'
-            }}
-            {...props}
-        >
             {children}
         </button>
     );

tsconfig.json

@@ -13,7 +13,7 @@
         "outDir": "dist/esm",
         "sourceMap": true,
         "strict": true,
-        "target": "es5"
+        "target": "es6"
     },
     "include": ["src/**/*.ts", "src/**/*.tsx"]
 }