fix: syntax issues caused by upgrading mui5

This commit is contained in:
huzibaca 2024-11-12 20:05:28 +08:00
parent ec0d872f11
commit 6e8def3ef7
No known key found for this signature in database
GPG Key ID: D4364EE4851DC302
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) => {
const Fieldset = styled(Box)(() => ({
const Fieldset = styled(Box)<{ component?: string }>(() => ({
position: "relative",
border: "1px solid #bbb",
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",
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,

View File

@ -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",

View File

@ -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>}
</>
}
/>

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",
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),