PrimeVue Dialog组件样式与文档示例不符问题求助

我使用PrimeVue的Dialog组件时，直接复制了官方文档的示例代码，但渲染出来的效果和示例完全不一致。我推测是缺少必要的CSS文件导入，但在官方文档中没找到对应的解决指引。

以下是我的App.vue文件（来自官方示例）：

<script lang="ts" setup>
import { ref } from 'vue';
import { Button } from 'primevue';
const visible = ref(false)
</script>
<template>
<Button label="Show" @click="visible = true" />
<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
    <span class="text-surface-500 dark:text-surface-400 block mb-8">Update your information.</span>
    <div class="flex items-center gap-4 mb-4">
        <label for="username" class="font-semibold w-24">Username</label>
        <InputText id="username" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex items-center gap-4 mb-8">
        <label for="email" class="font-semibold w-24">Email</label>
        <InputText id="email" class="flex-auto" autocomplete="off" />
    </div>
    <div class="flex justify-end gap-2">
        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
        <Button type="button" label="Save" @click="visible = false"></Button>
    </div>
</Dialog>
</template>

以及main.ts文件：

import './assets/main.css'
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import App from './App.vue'
import Aura from '@primevue/themes/aura';
import 'primeicons/primeicons.css'

const app = createApp(App);
app.use(PrimeVue, {
  theme: {
      preset: Aura,
      options: {
        prefix: 'p',
      }
  }
});
app.mount("#app");

当前渲染效果：

补充说明：添加import 'primeflex/primeflex.css'后，效果有所改善，但仍与文档示例渲染效果不一致：

内容的提问来源于stack exchange，提问作者guir