咒語: 請幫我 使用mui組件 優化上述內容 並且加入CSS排版

解析: 使用UI套件 跟AI生成的CSS 完成畫面
先安裝該有套件

npm install @mui/material @mui/icons-material react-router-dom

再更動App.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import { AppBar, Toolbar, Typography, Container, Button } from '@mui/material';
import styled from 'styled-components';

// 首頁組件
function Home() {
  return <h2>首頁</h2>;
}

// 登入組件
function Login() {
  return <h2>登入</h2>;
}

// 商品介紹組件
function Product() {
  return <h2>商品介紹</h2>;
}

// 購物車頁面組件
function Cart() {
  return <h2>購物車頁</h2>;
}

const AppWrapper = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
`;

const StyledAppBar = styled(AppBar)`
  background-color: #2196f3;
`;

const NavLinks = styled.div`
  ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 20px;

    li {
      a {
        text-decoration: none;
        color: white;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
`;

function App() {
  return (
    <Router>
      <StyledAppBar position="static">
        <Toolbar>
          <Container>
            <Typography variant="h6" component="div">
              <Link to="/" style={{ color: 'inherit', textDecoration: 'none' }}>
                My App
              </Link>
            </Typography>
            <NavLinks>
              <ul>
                <li>
                  <Link to="/">首頁</Link>
                </li>
                <li>
                  <Link to="/login">登入</Link>
                </li>
                <li>
                  <Link to="/product">商品介紹</Link>
                </li>
                <li>
                  <Link to="/cart">購物車</Link>
                </li>
              </ul>
            </NavLinks>
          </Container>
        </Toolbar>
      </StyledAppBar>
      <Container>
        <AppWrapper>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/product" element={<Product />} />
            <Route path="/cart" element={<Cart />} />
          </Routes>
        </AppWrapper>
      </Container>
    </Router>
  );
}

export default App;

補述:這裡的樣式的可能不符預期
會把原本vite的 index.css /* :root 註解掉
以及body 的 /* place-items: center; */

並且加上

#root {
  width: 100%;
}