From 6e8def3ef771330907e3ff2bfaec7087b5bdd0c4 Mon Sep 17 00:00:00 2001
From: huzibaca <masterorigin91@gmail.com>
Date: Tue, 12 Nov 2024 20:05:28 +0800
Subject: [PATCH] fix: syntax issues caused by upgrading mui5

---
 src/components/base/base-fieldset.tsx    |  2 +-
 src/components/proxy/provider-button.tsx | 26 +++++++++++++-----------
 src/components/proxy/proxy-item-mini.tsx |  4 +++-
 src/components/proxy/proxy-item.tsx      | 14 ++++++-------
 src/components/rule/provider-button.tsx  |  8 ++++++--
 5 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/base/base-fieldset.tsx b/src/components/base/base-fieldset.tsx
index ba16118..131f675 100644
--- a/src/components/base/base-fieldset.tsx
+++ b/src/components/base/base-fieldset.tsx
@@ -10,7 +10,7 @@ type Props = {
 };
 
 export const BaseFieldset: React.FC<Props> = (props: Props) => {
-  const Fieldset = styled(Box)(() => ({
+  const Fieldset = styled(Box)<{ component?: string }>(() => ({
     position: "relative",
     border: "1px solid #bbb",
     borderRadius: "5px",
diff --git a/src/components/proxy/provider-button.tsx b/src/components/proxy/provider-button.tsx
index ca81a42..f9fddfd 100644
--- a/src/components/proxy/provider-button.tsx
+++ b/src/components/proxy/provider-button.tsx
@@ -190,7 +190,7 @@ export const ProviderButton = () => {
     </>
   );
 };
-const TypeBox = styled(Box)(({ theme }) => ({
+const TypeBox = styled(Box)<{ component?: React.ElementType }>(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.secondary.main, 0.5),
@@ -202,17 +202,19 @@ const TypeBox = styled(Box)(({ theme }) => ({
   lineHeight: 1.25,
 }));
 
-const StyledTypeBox = styled(Box)(({ theme }) => ({
-  display: "inline-block",
-  border: "1px solid #ccc",
-  borderColor: alpha(theme.palette.primary.main, 0.5),
-  color: alpha(theme.palette.primary.main, 0.8),
-  borderRadius: 4,
-  fontSize: 10,
-  marginRight: "4px",
-  padding: "0 2px",
-  lineHeight: 1.25,
-}));
+const StyledTypeBox = styled(Box)<{ component?: React.ElementType }>(
+  ({ theme }) => ({
+    display: "inline-block",
+    border: "1px solid #ccc",
+    borderColor: alpha(theme.palette.primary.main, 0.5),
+    color: alpha(theme.palette.primary.main, 0.8),
+    borderRadius: 4,
+    fontSize: 10,
+    marginRight: "4px",
+    padding: "0 2px",
+    lineHeight: 1.25,
+  })
+);
 
 const boxStyle = {
   height: 26,
diff --git a/src/components/proxy/proxy-item-mini.tsx b/src/components/proxy/proxy-item-mini.tsx
index 0205070..b80da18 100644
--- a/src/components/proxy/proxy-item-mini.tsx
+++ b/src/components/proxy/proxy-item-mini.tsx
@@ -239,7 +239,9 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({
   borderRadius: "4px",
 }));
 
-const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({
+const TypeBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "component",
+})<{ component?: React.ElementType }>(({ theme: { palette, typography } }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: "text.secondary",
diff --git a/src/components/proxy/proxy-item.tsx b/src/components/proxy/proxy-item.tsx
index 15e1679..53f8a23 100644
--- a/src/components/proxy/proxy-item.tsx
+++ b/src/components/proxy/proxy-item.tsx
@@ -31,7 +31,7 @@ const Widget = styled(Box)(() => ({
   borderRadius: "4px",
 }));
 
-const TypeBox = styled(Box)(({ theme }) => ({
+const TypeBox = styled("span")(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.text.secondary, 0.36),
@@ -121,14 +121,12 @@ export const ProxyItem = (props: Props) => {
                 {showType && proxy.now && ` - ${proxy.now}`}
               </Box>
               {showType && !!proxy.provider && (
-                <TypeBox component="span">{proxy.provider}</TypeBox>
+                <TypeBox>{proxy.provider}</TypeBox>
               )}
-              {showType && <TypeBox component="span">{proxy.type}</TypeBox>}
-              {showType && proxy.udp && <TypeBox component="span">UDP</TypeBox>}
-              {showType && proxy.xudp && (
-                <TypeBox component="span">XUDP</TypeBox>
-              )}
-              {showType && proxy.tfo && <TypeBox component="span">TFO</TypeBox>}
+              {showType && <TypeBox>{proxy.type}</TypeBox>}
+              {showType && proxy.udp && <TypeBox>UDP</TypeBox>}
+              {showType && proxy.xudp && <TypeBox>XUDP</TypeBox>}
+              {showType && proxy.tfo && <TypeBox>TFO</TypeBox>}
             </>
           }
         />
diff --git a/src/components/rule/provider-button.tsx b/src/components/rule/provider-button.tsx
index a6e2711..27b0641 100644
--- a/src/components/rule/provider-button.tsx
+++ b/src/components/rule/provider-button.tsx
@@ -162,7 +162,9 @@ export const ProviderButton = () => {
     </>
   );
 };
-const TypeBox = styled(Box)(({ theme }) => ({
+const TypeBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "component",
+})<{ component?: React.ElementType }>(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.secondary.main, 0.5),
@@ -174,7 +176,9 @@ const TypeBox = styled(Box)(({ theme }) => ({
   lineHeight: 1.25,
 }));
 
-const StyledTypeBox = styled(Box)(({ theme }) => ({
+const StyledTypeBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "component",
+})<{ component?: React.ElementType }>(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.primary.main, 0.5),