css - 即使在 app.js 中导入样式后，Ionic React 样式也不会呈现

Question

我正在尝试使用 ionic ui 库 (@ionic/react) 来创建我的应用程序的界面。
我已经包含了 ionic 的 core.css 文件。
但是组件呈现时没有样式。

以下是我的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

依赖版本:-
"@ionic/react": "^6.0.9",
“ react ”:“^16.13.1”，

Answer 1

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

开发人员必须导入并调用 setupIonicReact，即使他们没有设置自定义配置也是如此。

在 App.tsx 中

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