fix: separate components from @mui/material/styles

issue: vercel/next.js#55663

Author: peng-few

app/_components/Drawer.tsx

@@ -1,6 +1,6 @@
 'use client'
 import MuiDrawer, { DrawerProps } from '@mui/material/Drawer';
-import { styled,Theme, CSSObject } from '@mui/material';
+import { styled,Theme, CSSObject } from '@mui/material/styles';
 import { useState } from "react";
 import IconButton from '@mui/material/IconButton'
 import {Bars3Icon} from '@heroicons/react/24/outline'

app/_components/ExpandedTableRow.tsx

@@ -1,13 +1,14 @@
 'use client'
 import TableRow, { TableRowProps } from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
+import { SxProps, Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import React, { useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import FocusedTableRow from './FocusdTableRow';
-import { SxProps, Theme } from '@mui/material';
+
 
 export interface ExpandedTableRowProps extends TableRowProps{
   detail: React.ReactElement;

app/_components/FocusdTableRow.tsx

@@ -2,7 +2,7 @@
 import TableRow, { TableRowProps } from '@mui/material/TableRow';
 import { type ReactElement } from 'react';
 import { useFocusedRow} from './FocusedRowProvider';
-import { SxProps, Theme,alpha } from '@mui/material';
+import { SxProps, Theme,alpha } from '@mui/material/styles';
 
 export interface FocusedTableRowProps extends TableRowProps{
   detail: ReactElement;