我開始在一個項目中使用remix.js，這是我第一次使用js。我設法創建了幾個頁面，但當我試圖添加一個新的選擇，整個頁面失去了它的風格。在我第一次移除它之后，它又回來了，但是現在它不再顯示任何樣式了。

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import {Form, useLoaderData, } from '@remix-run/react';
import { requireUserId } from '~/session.server';
import { ActionArgs, json } from '@remix-run/node';
import { prisma } from '~/db.server';
import Select from 'react-select'




interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}
export async function loader() {
  const allPeriferice = await prisma.periferice.findMany()
console.log(allPeriferice)
return json(allPeriferice);
}
export default function BasicTabs() {
  const [value, setValue] = React.useState(0);
  const data = useLoaderData<typeof loader>();
  console.log(data);
  const options = data.map(periferice => ({value: periferice.id, label: periferice.denumire})) ;

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <main className="relative min-h-screen bg-white sm:flex sm:items-center sm:justify-center">
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}><Box sx={{
        width: 700,
        height: 700,
        
      }}>
      <Box sx={{ borderBottom: 1, borderColor: 'divider', alignItems: 'center' }}>
        <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
          <Tab label="Adauga Birou" {...a11yProps(0)}  />
          <Tab label="Lista Birouri" {...a11yProps(1)} />
        </Tabs>
      </Box>
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '' }}>
        <TabPanel value={value} index={0}>
       <h2>Adauga Birou</h2> 
        <Form method="POST"><input type="text" name="nume" className="rounded text-pink-500" />
        <button type="submit" className="bg-slate-900 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 text-white font-semibold h-12 px-6 rounded-lg w-full flex items-center justify-center sm:w-auto dark:bg-sky-500 dark:highlight-white/20 dark:hover:bg-sky-400">Adauga</button>
  <div>
        <Select name="periferice" options={options} /></div> 
        </Form>
      </TabPanel>
      </div>
      <TabPanel value={value} index={1} >
        Lista Birouri
      </TabPanel>
    </Box>
    </div></main>
  );
}

  export const action = async ({ request }: ActionArgs) => {
    const userId = await requireUserId(request);
  
    const formData = await request.formData();
    const nume = formData.get("nume");
    const periferice = formData.get("periferice")
    if (typeof nume !== "string" || nume.length === 0) {
      return json(
        { errors: { body: null, nume: "Title is required" } },
        { status: 400 }
      );
    }
    if (typeof periferice !== "string" || periferice.length === 0) {
      return json(
        { errors: { body: null, periferice: "Title is required" } },
        { status: 400 }
      );
    }
  
    const note = await prisma.birou.create({
      data: {
        nume,
        periferice,
        },
      },)
  
    return json(true);
  }

這是整個頁面現在的樣子:

我真的不知道如何讓它回來或避免任何類似這樣的錯誤在未來。