fix: syntax issues caused by upgrading mui5

This commit is contained in:
huzibaca 2024-11-12 20:05:28 +08:00
parent 586af67829
commit 27a78af269
5 changed files with 30 additions and 24 deletions

View File

@ -10,7 +10,7 @@ type Props = {
}; };
export const BaseFieldset: React.FC<Props> = (props: Props) => { export const BaseFieldset: React.FC<Props> = (props: Props) => {
const Fieldset = styled(Box)(() => ({ const Fieldset = styled(Box)<{ component?: string }>(() => ({
position: "relative", position: "relative",
border: "1px solid #bbb", border: "1px solid #bbb",
borderRadius: "5px", borderRadius: "5px",

View File

@ -190,7 +190,7 @@ export const ProviderButton = () => {
</> </>
); );
}; };
const TypeBox = styled(Box)(({ theme }) => ({ const TypeBox = styled(Box)<{ component?: React.ElementType }>(({ theme }) => ({
display: "inline-block", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: alpha(theme.palette.secondary.main, 0.5), borderColor: alpha(theme.palette.secondary.main, 0.5),
@ -202,17 +202,19 @@ const TypeBox = styled(Box)(({ theme }) => ({
lineHeight: 1.25, lineHeight: 1.25,
})); }));
const StyledTypeBox = styled(Box)(({ theme }) => ({ const StyledTypeBox = styled(Box)<{ component?: React.ElementType }>(
display: "inline-block", ({ theme }) => ({
border: "1px solid #ccc", display: "inline-block",
borderColor: alpha(theme.palette.primary.main, 0.5), border: "1px solid #ccc",
color: alpha(theme.palette.primary.main, 0.8), borderColor: alpha(theme.palette.primary.main, 0.5),
borderRadius: 4, color: alpha(theme.palette.primary.main, 0.8),
fontSize: 10, borderRadius: 4,
marginRight: "4px", fontSize: 10,
padding: "0 2px", marginRight: "4px",
lineHeight: 1.25, padding: "0 2px",
})); lineHeight: 1.25,
})
);
const boxStyle = { const boxStyle = {
height: 26, height: 26,

View File

@ -239,7 +239,9 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({
borderRadius: "4px", 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", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: "text.secondary", borderColor: "text.secondary",

View File

@ -31,7 +31,7 @@ const Widget = styled(Box)(() => ({
borderRadius: "4px", borderRadius: "4px",
})); }));
const TypeBox = styled(Box)(({ theme }) => ({ const TypeBox = styled("span")(({ theme }) => ({
display: "inline-block", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: alpha(theme.palette.text.secondary, 0.36), borderColor: alpha(theme.palette.text.secondary, 0.36),
@ -121,14 +121,12 @@ export const ProxyItem = (props: Props) => {
{showType && proxy.now && ` - ${proxy.now}`} {showType && proxy.now && ` - ${proxy.now}`}
</Box> </Box>
{showType && !!proxy.provider && ( {showType && !!proxy.provider && (
<TypeBox component="span">{proxy.provider}</TypeBox> <TypeBox>{proxy.provider}</TypeBox>
)} )}
{showType && <TypeBox component="span">{proxy.type}</TypeBox>} {showType && <TypeBox>{proxy.type}</TypeBox>}
{showType && proxy.udp && <TypeBox component="span">UDP</TypeBox>} {showType && proxy.udp && <TypeBox>UDP</TypeBox>}
{showType && proxy.xudp && ( {showType && proxy.xudp && <TypeBox>XUDP</TypeBox>}
<TypeBox component="span">XUDP</TypeBox> {showType && proxy.tfo && <TypeBox>TFO</TypeBox>}
)}
{showType && proxy.tfo && <TypeBox component="span">TFO</TypeBox>}
</> </>
} }
/> />

View File

@ -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", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: alpha(theme.palette.secondary.main, 0.5), borderColor: alpha(theme.palette.secondary.main, 0.5),
@ -174,7 +176,9 @@ const TypeBox = styled(Box)(({ theme }) => ({
lineHeight: 1.25, lineHeight: 1.25,
})); }));
const StyledTypeBox = styled(Box)(({ theme }) => ({ const StyledTypeBox = styled(Box, {
shouldForwardProp: (prop) => prop !== "component",
})<{ component?: React.ElementType }>(({ theme }) => ({
display: "inline-block", display: "inline-block",
border: "1px solid #ccc", border: "1px solid #ccc",
borderColor: alpha(theme.palette.primary.main, 0.5), borderColor: alpha(theme.palette.primary.main, 0.5),