chore(deps): update npm dependencies to v9 (major) (#6819)

* fix: replace DeleteOutline with DeleteOutlined icon in BackupHistoryViewer

* chore(deps): update npm dependencies to v9

* refactor: bump @mui to v9

---------

Co-authored-by: Tunglies <77394545+Tunglies@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

src/components/base/base-search-box.tsx

@@ -205,7 +205,7 @@ export const BaseSearchBox = ({
           input: {
             sx: { pr: 1 },
             endAdornment: (
-              <Box display="flex">
+              <Box sx={{ display: 'flex' }}>
                 {!!text && (
                   <Tooltip title={t('shared.placeholders.resetInput')}>
                     <IconButton

src/components/home/clash-info-card.tsx

@@ -30,47 +30,47 @@ export const ClashInfoCard = () => {
 
     return (
       <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.coreVersion')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {clashVersion || '-'}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.systemProxyAddress')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {systemProxyAddress}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.mixedPort')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {clashConfig.mixedPort || '-'}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.uptime')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {formattedUptime}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.clashInfo.fields.rulesCount')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {rules.length}
           </Typography>
         </Stack>

src/components/home/current-proxy-card.tsx

@@ -930,7 +930,7 @@ export const CurrentProxyCard = () => {
             }}
           >
             <Box>
-              <Typography variant="body1" fontWeight="medium">
+              <Typography variant="body1" sx={{ fontWeight: 'medium' }}>
                 {currentProxy.name}
               </Typography>
 
@@ -1026,9 +1026,11 @@ export const CurrentProxyCard = () => {
               disabled={isDirectMode}
               renderValue={renderProxyValue}
               MenuProps={{
-                PaperProps: {
-                  style: {
-                    maxHeight: 500,
+                slotProps: {
+                  paper: {
+                    style: {
+                      maxHeight: 500,
+                    },
                   },
                 },
               }}

src/components/home/enhanced-canvas-traffic-graph.tsx

@@ -1245,13 +1245,13 @@ export const EnhancedCanvasTrafficGraph = memo(
                 whiteSpace: 'nowrap',
               }}
             >
-              <Box color="text.secondary" mb={0.2}>
+              <Box sx={{ color: 'text.secondary', mb: 0.2 }}>
                 {tooltipData.timestamp}
               </Box>
-              <Box color="secondary.main" fontWeight="500">
+              <Box sx={{ color: 'secondary.main', fontWeight: 500 }}>
                 ↑ {tooltipData.upSpeed}
               </Box>
-              <Box color="primary.main" fontWeight="500">
+              <Box sx={{ color: 'primary.main', fontWeight: 500 }}>
                 ↓ {tooltipData.downSpeed}
               </Box>
             </Box>

src/components/home/enhanced-card.tsx

@@ -90,9 +90,11 @@ export const EnhancedCard = forwardRef<HTMLElement, EnhancedCardProps>(
               {typeof title === 'string' ? (
                 <Typography
                   variant="h6"
-                  fontWeight="medium"
-                  fontSize={18}
-                  sx={titleTruncateStyle}
+                  sx={{
+                    ...titleTruncateStyle,
+                    fontWeight: 'medium',
+                    fontSize: 18,
+                  }}
                   title={title}
                 >
                   {title}

src/components/home/enhanced-traffic-stats.tsx

@@ -120,9 +120,8 @@ const CompactStatCard = memo(
           >
             <Typography
               variant="body1"
-              fontWeight="bold"
               noWrap
-              sx={{ mr: 0.5 }}
+              sx={{ mr: 0.5, fontWeight: 'bold' }}
             >
               {value}
             </Typography>

src/components/home/home-profile-card.tsx

@@ -103,7 +103,7 @@ const ProfileDetails = ({
     <Box>
       <Stack spacing={2}>
         {current.url && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <DnsOutlined fontSize="small" color="action" />
             <Typography
               variant="body2"
@@ -115,7 +115,6 @@ const ProfileDetails = ({
               {current.home ? (
                 <Link
                   component="button"
-                  fontWeight="medium"
                   onClick={() => current.home && openWebUrl(current.home)}
                   sx={{
                     display: 'inline-flex',
@@ -123,6 +122,7 @@ const ProfileDetails = ({
                     minWidth: 0,
                     maxWidth: 'calc(100% - 40px)',
                     ml: 0.5,
+                    fontWeight: 'medium',
                   }}
                   title={parseUrl(current.url)}
                 >
@@ -151,7 +151,6 @@ const ProfileDetails = ({
               ) : (
                 <Typography
                   component="span"
-                  fontWeight="medium"
                   sx={{
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -159,6 +158,7 @@ const ProfileDetails = ({
                     minWidth: 0,
                     flex: 1,
                     ml: 0.5,
+                    fontWeight: 'medium',
                   }}
                   title={parseUrl(current.url)}
                 >
@@ -170,7 +170,7 @@ const ProfileDetails = ({
         )}
 
         {current.updated && (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <UpdateOutlined
               fontSize="small"
               color="action"
@@ -187,7 +187,7 @@ const ProfileDetails = ({
               onClick={onUpdateProfile}
             >
               {t('shared.labels.updateTime')}:{' '}
-              <Box component="span" fontWeight="medium">
+              <Box component="span" sx={{ fontWeight: 'medium' }}>
                 {dayjs(current.updated * 1000).format('YYYY-MM-DD HH:mm')}
               </Box>
             </Typography>
@@ -196,11 +196,11 @@ const ProfileDetails = ({
 
         {current.extra && (
           <>
-            <Stack direction="row" alignItems="center" spacing={1}>
+            <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
               <SpeedOutlined fontSize="small" color="action" />
               <Typography variant="body2" color="text.secondary">
                 {t('shared.labels.usedTotal')}:{' '}
-                <Box component="span" fontWeight="medium">
+                <Box component="span" sx={{ fontWeight: 'medium' }}>
                   {parseTraffic(usedTraffic)} /{' '}
                   {parseTraffic(current.extra.total)}
                 </Box>
@@ -208,11 +208,11 @@ const ProfileDetails = ({
             </Stack>
 
             {current.extra.expire > 0 && (
-              <Stack direction="row" alignItems="center" spacing={1}>
+              <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
                 <EventOutlined fontSize="small" color="action" />
                 <Typography variant="body2" color="text.secondary">
                   {t('shared.labels.expireTime')}:{' '}
-                  <Box component="span" fontWeight="medium">
+                  <Box component="span" sx={{ fontWeight: 'medium' }}>
                     {parseExpire(current.extra.expire)}
                   </Box>
                 </Typography>
@@ -318,8 +318,6 @@ export const HomeProfileCard = ({
       <Link
         component="button"
         variant="h6"
-        fontWeight="medium"
-        fontSize={18}
         onClick={() => current.home && openWebUrl(current.home)}
         sx={{
           color: 'inherit',
@@ -328,6 +326,8 @@ export const HomeProfileCard = ({
           alignItems: 'center',
           minWidth: 0,
           maxWidth: '100%',
+          fontWeight: 'medium',
+          fontSize: 18,
           '& > span': {
             overflow: 'hidden',
             textOverflow: 'ellipsis',

src/components/home/system-info-card.tsx

@@ -215,24 +215,23 @@ export const SystemInfoCard = () => {
       }
     >
       <Stack spacing={1.5}>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.osInfo')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             {osInfo}
           </Typography>
         </Stack>
         <Divider />
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
         >
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.autoLaunch')}
           </Typography>
-          <Stack direction="row" spacing={1} alignItems="center">
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <Chip
               size="small"
               label={
@@ -250,34 +249,32 @@ export const SystemInfoCard = () => {
         <Divider />
         <Stack
           direction="row"
-          justifyContent="space-between"
-          alignItems="center"
+          sx={{ justifyContent: 'space-between', alignItems: 'center' }}
         >
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.runningMode')}
           </Typography>
           <Typography
             variant="body2"
-            fontWeight="medium"
             onClick={handleRunningModeClick}
-            sx={runningModeStyle}
+            sx={{ ...runningModeStyle, fontWeight: 'medium' }}
           >
             {getModeIcon()}
             {getModeText()}
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.lastCheckUpdate')}
           </Typography>
           <Typography
             variant="body2"
-            fontWeight="medium"
             onClick={onCheckUpdate}
             sx={{
               cursor: 'pointer',
               textDecoration: 'underline',
+              fontWeight: 'medium',
               '&:hover': { opacity: 0.7 },
             }}
           >
@@ -285,11 +282,11 @@ export const SystemInfoCard = () => {
           </Typography>
         </Stack>
         <Divider />
-        <Stack direction="row" justifyContent="space-between">
+        <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
           <Typography variant="body2" color="text.secondary">
             {t('home.components.systemInfo.fields.vergeVersion')}
           </Typography>
-          <Typography variant="body2" fontWeight="medium">
+          <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
             v{appVersion}
           </Typography>
         </Stack>

src/components/layout/layout-traffic.tsx

@@ -53,29 +53,33 @@ export const LayoutTraffic = () => {
   const [inuse, inuseUnit] = parseTraffic(memory?.inuse || 0)
 
   const boxStyle: any = {
-    display: 'flex',
-    alignItems: 'center',
-    whiteSpace: 'nowrap',
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      whiteSpace: 'nowrap',
+    },
   }
   const iconStyle: any = {
     sx: { mr: '8px', fontSize: 16 },
   }
   const valStyle: any = {
     component: 'span',
-    textAlign: 'center',
-    sx: { flex: '1 1 56px', userSelect: 'none' },
+    sx: { flex: '1 1 56px', userSelect: 'none', textAlign: 'center' },
   }
   const unitStyle: any = {
     component: 'span',
     color: 'grey.500',
-    fontSize: '12px',
-    textAlign: 'right',
-    sx: { flex: '0 1 27px', userSelect: 'none' },
+    sx: {
+      flex: '0 1 27px',
+      userSelect: 'none',
+      fontSize: '12px',
+      textAlign: 'right',
+    },
   }
 
   return (
     <LightweightTrafficErrorBoundary>
-      <Box position="relative">
+      <Box sx={{ position: 'relative' }}>
         {trafficGraph && pageVisible && (
           <div
             style={{ width: '100%', height: 60, marginBottom: 6 }}
@@ -85,7 +89,7 @@ export const LayoutTraffic = () => {
           </div>
         )}
 
-        <Box display="flex" flexDirection="column" gap={0.75}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
           <Box
             title={`${t('home.components.traffic.metrics.uploadSpeed')}`}
             {...boxStyle}

src/components/profile/groups-editor-viewer.tsx

@@ -528,7 +528,7 @@ export const GroupsEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.groupsEditor.title')}
             <Box>
               <Button

src/components/profile/profile-item.tsx

@@ -690,7 +690,7 @@ export const ProfileItem = (props: Props) => {
             />
           </Box>
         )}
-        <Box position="relative">
+        <Box sx={{ position: 'relative' }}>
           <Box sx={{ display: 'flex', justifyContent: 'start' }}>
             {batchMode && (
               <IconButton
@@ -731,8 +731,12 @@ export const ProfileItem = (props: Props) => {
             </Box>
 
             <Typography
-              width={batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)'}
-              sx={{ fontSize: '18px', fontWeight: '600', lineHeight: '26px' }}
+              sx={{
+                width: batchMode ? 'calc(100% - 56px)' : 'calc(100% - 36px)',
+                fontSize: '18px',
+                fontWeight: '600',
+                lineHeight: '26px',
+              }}
               variant="h6"
               component="h2"
               noWrap
@@ -802,14 +806,14 @@ export const ProfileItem = (props: Props) => {
                   <Typography
                     noWrap
                     component="span"
-                    fontSize={14}
-                    textAlign="right"
                     title={
                       showNextUpdate
                         ? t('profiles.components.profileItem.tooltips.showLast')
                         : `${t('shared.labels.updateTime')}: ${parseExpire(updated)}\n${t('profiles.components.profileItem.tooltips.showNext')}`
                     }
                     sx={{
+                      fontSize: 14,
+                      textAlign: 'right',
                       cursor: 'pointer',
                       display: 'inline-block',
                       borderBottom: '1px dashed transparent',
@@ -861,7 +865,7 @@ export const ProfileItem = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()

src/components/profile/profile-more.tsx

@@ -103,17 +103,19 @@ export const ProfileMore = (props: Props) => {
         }}
       >
         <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          mb={0.5}
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            mb: 0.5,
+          }}
         >
           <Typography
-            width="calc(100% - 52px)"
             variant="h6"
             component="h2"
             noWrap
             title={t(globalTitles[id])}
+            sx={{ width: 'calc(100% - 52px)' }}
           >
             {t(globalTitles[id])}
           </Typography>
@@ -162,7 +164,7 @@ export const ProfileMore = (props: Props) => {
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()

src/components/profile/proxies-editor-viewer.tsx

@@ -374,7 +374,7 @@ export const ProxiesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('profiles.modals.proxiesEditor.title')}
             <Box>
               <Button

src/components/profile/rules-editor-viewer.tsx

@@ -584,7 +584,7 @@ export const RulesEditorViewer = (props: Props) => {
     >
       <DialogTitle>
         {
-          <Box display="flex" justifyContent="space-between">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
             {t('rules.modals.editor.title')}
             <Box>
               <Button

src/components/proxy/provider-button.tsx

@@ -151,9 +151,11 @@ export const ProviderButton = () => {
       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>
           <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
           >
             <Typography variant="h6">
               {t('proxies.page.provider.title')}

src/components/rule/provider-button.tsx

@@ -142,9 +142,11 @@ export const ProviderButton = () => {
       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
         <DialogTitle>
           <Box
-            display="flex"
-            justifyContent="space-between"
-            alignItems="center"
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
           >
             <Typography variant="h6">
               {t('rules.page.provider.dialogTitle')}

src/components/setting/mods/auto-backup-settings.tsx

@@ -134,7 +134,11 @@ export function AutoBackupSettings() {
   return (
     <Fragment>
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.scheduleLabel')}
             secondary={t('settings.modals.backup.auto.scheduleHelper')}
@@ -149,7 +153,11 @@ export function AutoBackupSettings() {
       </ListItem>
 
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={2} width="100%">
+        <Stack
+          direction="row"
+          spacing={2}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.intervalLabel')}
           />
@@ -187,7 +195,11 @@ export function AutoBackupSettings() {
       </ListItem>
 
       <ListItem divider disableGutters>
-        <Stack direction="row" alignItems="center" spacing={1} width="100%">
+        <Stack
+          direction="row"
+          spacing={1}
+          sx={{ alignItems: 'center', width: '100%' }}
+        >
           <ListItemText
             primary={t('settings.modals.backup.auto.changeLabel')}
             secondary={t('settings.modals.backup.auto.changeHelper')}

src/components/setting/mods/backup-config-viewer.tsx

@@ -234,9 +234,11 @@ export const BackupConfigViewer = memo(
           <Grid size={{ xs: 12, sm: 3 }}>
             <Stack
               direction="column"
-              justifyContent="space-between"
-              alignItems="stretch"
-              sx={{ height: '100%' }}
+              sx={{
+                justifyContent: 'space-between',
+                alignItems: 'stretch',
+                height: '100%',
+              }}
             >
               {webdavChanged ||
               webdav_url === undefined ||

src/components/setting/mods/backup-history-viewer.tsx

@@ -1,4 +1,4 @@
-import DeleteOutline from '@mui/icons-material/DeleteOutline'
+import DeleteOutlined from '@mui/icons-material/DeleteOutlined'
 import DownloadRounded from '@mui/icons-material/DownloadRounded'
 import RefreshRounded from '@mui/icons-material/RefreshRounded'
 import RestoreRounded from '@mui/icons-material/RestoreRounded'
@@ -282,8 +282,7 @@ export const BackupHistoryViewer = ({
         <Stack spacing={2}>
           <Stack
             direction="row"
-            alignItems="center"
-            justifyContent="space-between"
+            sx={{ alignItems: 'center', justifyContent: 'space-between' }}
           >
             <Tabs
               value={source}
@@ -345,9 +344,11 @@ export const BackupHistoryViewer = ({
                     secondary={
                       <Stack
                         direction="row"
-                        alignItems="center"
-                        justifyContent="space-between"
                         spacing={1.5}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                        }}
                       >
                         <Typography variant="caption" color="text.secondary">
                           {`${row.platform} · ${row.display_time}`}
@@ -355,7 +356,7 @@ export const BackupHistoryViewer = ({
                         <Stack
                           direction="row"
                           spacing={0.5}
-                          alignItems="center"
+                          sx={{ alignItems: 'center' }}
                         >
                           {isLocal && (
                             <IconButton
@@ -371,7 +372,7 @@ export const BackupHistoryViewer = ({
                             disabled={isBusy}
                             onClick={() => handleDelete(row.filename)}
                           >
-                            <DeleteOutline fontSize="small" />
+                            <DeleteOutlined fontSize="small" />
                           </IconButton>
                           <IconButton
                             size="small"
@@ -393,8 +394,7 @@ export const BackupHistoryViewer = ({
             <Stack
               direction="row"
               spacing={1}
-              justifyContent="flex-end"
-              alignItems="center"
+              sx={{ justifyContent: 'flex-end', alignItems: 'center' }}
             >
               <Typography variant="caption">
                 {currentPage + 1} / {pageCount}

src/components/setting/mods/backup-viewer.tsx

@@ -237,8 +237,7 @@ export function BackupViewer({ ref }: { ref?: Ref<DialogRef> }) {
                     direction="row"
                     spacing={1}
                     useFlexGap
-                    flexWrap="wrap"
-                    alignItems="center"
+                    sx={{ flexWrap: 'wrap', alignItems: 'center' }}
                   >
                     {item.actions}
                   </Stack>

src/components/setting/mods/clash-core-viewer.tsx

@@ -117,7 +117,7 @@ export function ClashCoreViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.sections.clash.form.fields.clashCore')}
           <Box>
             <LoadingButton

src/components/setting/mods/clash-port-viewer.tsx

@@ -221,7 +221,7 @@ export const ClashPortViewer = forwardRef<ClashPortViewerRef>((_, ref) => {
       }}
       okBtn={
         loading ? (
-          <Stack direction="row" alignItems="center" spacing={1}>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
             <CircularProgress size={20} />
             {t('shared.statuses.saving')}
           </Stack>

src/components/setting/mods/config-viewer.tsx

@@ -36,7 +36,7 @@ export const ConfigViewer = forwardRef<DialogRef>((_, ref) => {
     <EditorViewer
       open={true}
       title={
-        <Box display="flex" alignItems="center" gap={2}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           {t('settings.components.verge.advanced.fields.runtimeConfig')}
           <Chip label={t('shared.labels.readOnly')} size="small" />
         </Box>

src/components/setting/mods/controller-viewer.tsx

@@ -111,7 +111,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
       contentSx={{ width: 400 }}
       okBtn={
         isSaving ? (
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <CircularProgress size={16} color="inherit" />
             {t('shared.statuses.saving')}
           </Box>
@@ -153,7 +153,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
           <ListItemText
             primary={t('settings.sections.externalController.fields.address')}
           />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <TextField
               size="small"
               sx={{
@@ -193,7 +193,7 @@ export function ControllerViewer({ ref }: { ref?: Ref<DialogRef> }) {
           <ListItemText
             primary={t('settings.sections.externalController.fields.secret')}
           />
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <TextField
               size="small"
               sx={{

src/components/setting/mods/dns-viewer.tsx

@@ -623,9 +623,15 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
       open={open}
       disableEnforceFocus={!visualization}
       title={
-        <Box display="flex" justifyContent="space-between" alignItems="center">
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
           {t('settings.modals.dns.dialog.title')}
-          <Box display="flex" alignItems="center" gap={1}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <Button
               variant="outlined"
               size="small"

src/components/setting/mods/external-controller-cors.tsx

@@ -194,10 +194,12 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
         <List sx={{ width: '90%', padding: 2 }}>
           <ListItem sx={{ padding: '8px 0' }}>
             <Box
-              display="flex"
-              justifyContent="space-between"
-              alignItems="center"
-              width="100%"
+              sx={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+                width: '100%',
+              }}
             >
               <span style={{ fontWeight: 'normal' }}>
                 {t('settings.sections.externalCors.fields.allowPrivateNetwork')}
@@ -240,7 +242,7 @@ export const HeaderConfiguration = forwardRef<ClashHeaderConfigingRef>(
                     placeholder={t(
                       'settings.sections.externalCors.placeholders.origin',
                     )}
-                    inputProps={{ style: { fontSize: 14 } }}
+                    slotProps={{ htmlInput: { style: { fontSize: 14 } } }}
                   />
                   <Button
                     variant="contained"

src/components/setting/mods/hotkey-input.tsx

@@ -90,7 +90,7 @@ export const HotkeyInput = (props: Props) => {
 
         <div className="list">
           {keys.map((key, index) => (
-            <Box display="flex" key={key}>
+            <Box sx={{ display: 'flex' }} key={key}>
               <span className="delimiter" hidden={index === 0}>
                 +
               </span>

src/components/setting/mods/network-interface-viewer.tsx

@@ -27,7 +27,7 @@ export function NetworkInterfaceViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.networkInterface.title')}
           <Box>
             <Button

src/components/setting/mods/tun-viewer.tsx

@@ -141,7 +141,7 @@ export function TunViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between" gap={1}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 1 }}>
           <Typography variant="h6">{t('settings.modals.tun.title')}</Typography>
           <Button
             variant="outlined"

src/components/setting/mods/update-viewer.tsx

@@ -112,7 +112,7 @@ export function UpdateViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.update.title', {
             version: updateInfo?.version ?? '',
           })}

src/components/setting/mods/web-ui-item.tsx

@@ -49,7 +49,11 @@ export const WebUIItem = (props: Props) => {
   if (editing || onlyEdit) {
     return (
       <>
-        <Stack spacing={0.75} direction="row" mt={1} mb={1} alignItems="center">
+        <Stack
+          spacing={0.75}
+          direction="row"
+          sx={{ mt: 1, mb: 1, alignItems: 'center' }}
+        >
           <TextField
             autoComplete="new-password"
             fullWidth
@@ -105,13 +109,17 @@ export const WebUIItem = (props: Props) => {
 
   return (
     <>
-      <Stack spacing={0.75} direction="row" alignItems="center" mt={1} mb={1}>
+      <Stack
+        spacing={0.75}
+        direction="row"
+        sx={{ alignItems: 'center', mt: 1, mb: 1 }}
+      >
         <Typography
           component="div"
-          width="100%"
           title={value}
           color={value ? 'text.primary' : 'text.secondary'}
           sx={({ palette }) => ({
+            width: '100%',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             '> .placeholder': {

src/components/setting/mods/web-ui-viewer.tsx

@@ -100,7 +100,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
     <BaseDialog
       open={open}
       title={
-        <Box display="flex" justifyContent="space-between">
+        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
           {t('settings.modals.webUI.title')}
           <Button
             variant="contained"
@@ -127,7 +127,7 @@ export function WebUIViewer({ ref }: { ref?: Ref<DialogRef> }) {
       {!editing && webUIList.length === 0 && (
         <BaseEmpty
           extra={
-            <Typography mt={2} sx={{ fontSize: '12px' }}>
+            <Typography sx={{ mt: 2, fontSize: '12px' }}>
               {t('settings.modals.webUI.messages.placeholderInstruction')}
             </Typography>
           }

src/components/shared/traffic-error-boundary.tsx

@@ -182,8 +182,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
       <Typography
         variant="body2"
         color="text.secondary"
-        textAlign="center"
-        sx={{ mb: 2 }}
+        sx={{ mb: 2, textAlign: 'center' }}
       >
         {t('shared.feedback.errors.trafficStatsDescription')}
       </Typography>
@@ -194,7 +193,7 @@ const TrafficErrorFallback: React.FC<TrafficErrorFallbackProps> = ({
           {error instanceof Error ? error.message : 'Unknown error'}
         </Typography>
         {retryCount > 0 && (
-          <Typography variant="caption" display="block" sx={{ mt: 1 }}>
+          <Typography variant="caption" sx={{ mt: 1, display: 'block' }}>
             {t('shared.labels.retryAttempts')}: {retryCount}/{maxRetries}
           </Typography>
         )}

src/components/test/test-item.tsx

@@ -116,8 +116,7 @@ export const TestItem = ({
         }}
       >
         <Box
-          position="relative"
-          sx={{ cursor: 'move' }}
+          sx={{ position: 'relative', cursor: 'move' }}
           ref={setNodeRef}
           {...attributes}
           {...listeners}
@@ -208,7 +207,7 @@ export const TestItem = ({
         anchorPosition={position}
         anchorReference="anchorPosition"
         transitionDuration={225}
-        MenuListProps={{ sx: { py: 0.5 } }}
+        slotProps={{ list: { sx: { py: 0.5 } } }}
         onContextMenu={(e) => {
           setAnchorEl(null)
           e.preventDefault()