我遇到了一个问题，在我的Next.js应用程序中，有些页面没有应用Ionic样式。具体来说，离子风格是工作在主页上，但不是在个人资料页。我正在寻求指导，如何排除故障，并确保离子风格是正确的应用到这两个网页。
下面是代码和文件结构
page.tsx in the src/app folder:
export default function Home() {
const router = useRouter();
useEffect(() => {
return router.push('/home');
}, []);
return (
<main className={styles.main}>
{/* Ionic components */}
<IonButton color="primary">
Previous
</IonButton>
</main>
);
}src/app/layout.tsx in the src/app folder:
import './globals.scss'
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
// /* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/typography.css';
// /* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
import Script from 'next/script';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout ({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<Script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></Script>
</head>
<body className={inter.className}>{children}</body>
</html>
)
}src/app/Profile/Profile.tsx
import {IonButton} from "@ionic/react"
export default function Profile() {
return (
<IonButton color="primary">
Profile Button
</IonButton>
);
}在个人资料页面中，IonButton上的离子样式不起作用
我期望通过系统地检查这些方面并比较“主页”和“个人资料”页面，我将能够确定问题的根本原因，防止离子风格被一致地应用。
1条答案
按热度按时间6yt4nkrj1#
将
Profile.tsx重命名为page.tsx。默认情况下，Next.js将每个页面呈现为服务器组件。@ionic/react库作为客户端工作。需要“使用客户端”指令来呈现为客户端。请仔细命名您的页面和组件，因为它会引起混淆。