use styled for custom button

src/components/Button.tsx

@@ -1,32 +1,19 @@
-import { Button as DefaultButton } from "@mui/material";
+import { Button as DefaultButton, styled } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 
 
 interface Props {
-    fullWidth?: boolean;
     backgroundColor?: string;
-    color?: string;
-    variant: "outlined" | "contained";
-    children: React.ReactNode;
+    textColor?: string;
 }
 
-export default function Button({ fullWidth = false, backgroundColor, color, variant, children }: Props) {
-
-    return (
-        <div>
-            <DefaultButton
-                fullWidth={fullWidth}
-                variant={variant}
-                sx={{
-                    backgroundColor,
-                    color,
-                    borderRadius: "8px",
-                    px: "41.5px",
-                    py: "9px",
-                    boxShadow: "none",
-                }}
-            >
-                {children}
-            </DefaultButton>
-        </div>
-    );
-}
+export default styled(DefaultButton)<ButtonProps & Props>(props => ({
+    paddingLeft: "41.5px",
+    paddingRight: "41.5px",
+    paddingTop: "9px",
+    paddingBottom: "9px",
+    borderRadius: "8px",
+    backgroundColor: props.backgroundColor,
+    color: props.textColor,
+    boxShadow: "none",
+}));

src/components/landing/Section1.tsx

@@ -74,7 +74,7 @@ export default function Section1() {
                 <Button
                     variant="contained"
                     backgroundColor={theme.palette.custom.brightPurple.main}
-                    color={theme.palette.primary.main}
+                    textColor={theme.palette.primary.main}
                 >Подробнее</Button>
             </Box>
         </SectionWrapper>

src/components/landing/Section5.tsx

@@ -1,5 +1,5 @@
-import { Box,  Typography, useTheme } from "@mui/material";
-import Button from "../Button";
+import { Box, Typography, useTheme } from "@mui/material";
+import CustomButton from "../Button";
 import SectionWrapper from "../SectionWrapper";
 
 
@@ -36,14 +36,14 @@ export default function Section5() {
                         }}
                     >
                         {/** extract buttons as components */}
-                        <Button
+                        <CustomButton
                             fullWidth
                             variant="outlined"
-                        >Подробнее</Button>
-                        <Button
+                        >Подробнее</CustomButton>
+                        <CustomButton
                             fullWidth
                             variant="contained"
-                        >Подробнее</Button>
+                        >Подробнее</CustomButton>
                     </Box>
                 </Box>
                 <Box