Ionic style not working in nextjs

I am facing an issue where Ionic styles are not being applied to some pages in my Next.js application. Specifically, the Ionic styles are working on the home page but not on the profile page. I am seeking guidance on how to troubleshoot and ensure that Ionic styles are properly applied to both pages.

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">

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: React.ReactNode
}) {
  return (
    <html lang="en">
      <Script type="module" src=""></Script>
      <body className={inter.className}>{children}</body>


import {IonButton} from "@ionic/react"
export default function Profile() {
  return (
      <IonButton color="primary">
        Profile Button

here the ionic style on IonButton is not working