Ionic style not working in nextjs

Ionic Framework Ionic React
1

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
2

Did you solve that problem sir ?

3

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

hi, I have implemented a Baby Name Website, which helps parent to find their baby names with meaning.

I the web version with NextJs 14.
Now, i want to create a mobile app version of it.

Could you suggest, whether i should use Ionic , or should i use traditional way, life flutter.

5

A separate post would have been better, but we are here now :sweat_smile:

Since you are posting on the Ionic/Capacitor forums, we are going to be biased here…LOL. BUT, Ionic has many articles about this over on their blog. Just search for “flutter” or “react”.

Here are two recent ones: