Ionic React styles not rendering even after importing the styles in app.js

Question

I'm trying to use the ionic ui library(@ionic/react) to create the interface of my app.
I've included the core.css file from ionic.
But the components render without styles.

Following is the code in my App.js

import React from 'react'
import { IonButton } from '@ionic/react';


import '@ionic/react/css/core.css';

const App = () => {
  return (
    <>
      <IonButton color="primary">Primary</IonButton>
      <IonButton color="secondary">Secondary</IonButton>
      <IonButton color="tertiary">Tertiary</IonButton>
      <IonButton color="success">Success</IonButton>
      <IonButton color="warning">Warning</IonButton>
      <IonButton color="danger">Danger</IonButton>
      <IonButton color="light">Light</IonButton>
      <IonButton color="medium">Medium</IonButton>
      <IonButton color="dark">Dark</IonButton>
    </>
  )
}

export default App

check this image to see the result

dependencies versions: -
"@ionic/react": "^6.0.9",
"react": "^16.13.1",

Answer 1

NOTE https://ionicframework.com/docs/intro/upgrading-to-ionic-6#react

Developers must import and call setupIonicReact even if they are not setting custom config.

In, App.tsx

import { setupIonicReact } from '@ionic/react';
 
setupIonicReact();