Fix components using default theme

src/components/UserAvatar.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from 'react';
+import React, { type FC } from 'react';
 import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
 import Avatar from '@mui/material/Avatar';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 import { useApi } from 'hooks/useApi';
 
@@ -11,7 +11,6 @@ interface UserAvatarProps {
 
 const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
     const { api } = useApi();
-    const theme = useTheme();
 
     return user ? (
         <Avatar
@@ -21,12 +20,13 @@ const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
                     `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
                     undefined
             }
-            sx={{
+            // eslint-disable-next-line react/jsx-no-bind
+            sx={(theme) => ({
                 bgcolor: api && user.Id && user.PrimaryImageTag ?
-                    theme.palette.background.paper :
-                    theme.palette.primary.dark,
+                    theme.vars.palette.background.paper :
+                    theme.vars.palette.primary.dark,
                 color: 'inherit'
-            }}
+            })}
         />
     ) : null;
 };

src/components/mediainfo/StarIcons.tsx

@@ -2,7 +2,7 @@ import React, { type FC } from 'react';
 import classNames from 'classnames';
 import StarIcon from '@mui/icons-material/Star';
 import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 
 interface StarIconsProps {
     className?: string;
@@ -10,7 +10,6 @@ interface StarIconsProps {
 }
 
 const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
-    const theme = useTheme();
     const cssClass = classNames(
         'mediaInfoItem',
         'starRatingContainer',
@@ -21,9 +20,10 @@ const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
         <Box className={cssClass}>
             <StarIcon
                 fontSize={'small'}
-                sx={{
-                    color: theme.palette.starIcon.main
-                }}
+                // eslint-disable-next-line react/jsx-no-bind
+                sx={(theme) => ({
+                    color: theme.vars.palette.starIcon.main
+                })}
             />
             {communityRating.toFixed(1)}
         </Box>