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.

Code:
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>
  );
}

here the ionic style on IonButton is not working

1 Like

Did you solve that problem sir ?

It work with CDN , but i am having issue after build. For CDN , just add these inside section .

    <script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.esm.js"
    ></script>
    <script src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
    <link rel="stylesheet" href="globals.css" />