Saya baru sahaja mencipta aplikasi next.js13typescript menggunakan npxcreate-next-app. Saya telah mengalih keluar semua contoh css dan html dan cuba memperkenalkan MUI. App/layout.tsx saya kelihatan seperti ini: import{CssBaseline}from'@mui/material';exportdefaultfunctionRootLayout({children,}:{children:Reac

Bagaimana untuk menggunakan MUI dengan Penghala Aplikasi Next.js?

Saya baru sahaja menggunakan npx create-next-app 创建了一个 next.js 13 typescript 应用程序。我已经删除了所有示例 css 和 html，并尝试引入 MUI。我的 app/layout.tsx dan ia kelihatan seperti ini:

import { CssBaseline } from '@mui/material';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <CssBaseline />
        {children}
      </body>
    </html>
  )
}

Menambah bit CSSBaseline menghasilkan banyak ralat tentang perkara yang hilang daripada import React. Baca dalam talian Ini kerana React diakses daripada komponen pelayan, dan komponen susun atur akar mestilah komponen pelayan tersebut. Ini adalah output ralat:

Server Error
TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
React
node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js (14:41)
(sc_server)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js
file:///[...]/.next/server/app/page.js (1724:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (8:72)
(sc_server)/./node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js
file:///[...]/.next/server/app/page.js (1768:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js (5:95)
(sc_server)/./node_modules/@emotion/styled/dist/emotion-styled.esm.js
file:///[...]/.next/server/app/page.js (1779:1)
__webpack_require__
file:///[...]/.next/server/webpack-runtime.js (33:42)
require
node_modules/@mui/styled-engine/node/index.js (46:37)

Bukankah saya patut melakukan ini? Apa yang saya terlepas?

Saya rasa sebaik sahaja saya menyelesaikan perkara ini, perkara yang lain akan terlaksana dan saya akan dapat membina aplikasi MUI saya.

Saya sedang berfikir untuk mengalihkan contoh material-next-ts dari penghala halaman ke penghala aplikasi. Tetapi versi emosi yang digunakan menyokong kaedah lalai yang lebih mudah, yang nampaknya memerlukan persediaan sifar, jadi semua gelung yang dilalui penghalaan halaman dalam contoh nampaknya tidak perlu. Alangkah baiknya jika contoh itu dialihkan ke Penghala Aplikasi!

P粉754473468407 hari yang lalu549

Bagaimana untuk menggunakan MUI dengan Penghala Aplikasi Next.js?

membalas semua(1)saya akan balas