PrimeVue Dialog组件样式不生效问题求助

大家好，我现在在尝试实现一个简单的PrimeVue Dialog组件，但它的样式完全没达到预期效果，折腾了半天没搞定，来求助各位大佬！

我的Dialog组件代码： #

<template>
  <div class="card flex justify-center">
    <Dialog v-model:visible="dialogVisible" modal header="Register Accountant" :style="{ width: '25rem'}">
      <div class="flex items-center gap-4 mb-4">
        <label for="name" class="font-semibold w-24">Name</label>
        <InputText v-model="name" required id="name" class="flex-auto" autocomplete="off"></InputText>
      </div>
      <div class="flex items-center gap-4 mb-4">
        <label for="birthDate" class="font-semibold w-24">Birth date</label>
        <DatePicker v-model="birthDate" name="birthDate" fluid/>
      </div>
      <div class="flex justify-end gap-4">
        <Button label="Save" @click="saveAccountant" />
      </div>
    </Dialog>
  </div>
</template>

main.ts 配置情况： #

之前我尝试导入PrimeVue的CSS文件时会直接抛出错误，所以现在main.ts里只敢注册PrimeVue核心，相关配置代码如下：

import './assets/main.css'
import PrimeVue from 'primevue/config'
import { createApp } from 'vue'
import App from './App.vue'
import '/node_modules/primeflex/primeflex.css';
import "primeicons/primeicons.css";

const app = createApp(App)
app.use(PrimeVue)
app.mount('#app')

已安装的依赖包： #

• @primevue/themes（之前手滑写成了@primeuix/themes，实际装的是这个）
• primevue
• primeflex
• primeicons

核心问题： #

现在Dialog的显示效果完全不对，没有应用任何PrimeVue的默认主题样式，看起来就像一堆裸的HTML元素堆在一起。我已经导入了primeflex和primeicons的CSS，但组件自身的主题样式就是不生效。因为之前导PrimeVue的CSS报错留下了阴影，现在不敢随便加，请问我该怎么正确配置才能让Dialog的样式正常生效呢？

内容来源于stack exchange