Primereact与MUI Joy共存时样式加载异常问题排查

在同一个Vite项目中同时使用Primereact 10.2.1和MUI Joy 5.0.0-beta.15时，Primereact的样式无法正常加载，DataTable和按钮等组件渲染异常。已按版本要求导入Primereact主题CSS：

import 'primereact/resources/themes/lara-light-indigo/theme.css'

Primereact 10版本已废弃import 'primereact/resources/primereact.css'，当前该文件为空白文件。此前搭建过同类组合的测试项目且能正常运行，不确定当前问题是否由样式冲突导致。

项目依赖配置（package.json） #

{
  "name": "project-collection-sys",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.18",
    "@mui/joy": "5.0.0-beta.15",
    "@mui/lab": "5.0.0-alpha.153",
    "@mui/material": "^5.14.18",
    "primereact": "^10.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-paginate": "^8.2.0",
    "react-router-dom": "^6.20.0",
    "react-toastify": "^9.1.3"
  },
  "devDependencies": {
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "vite": "^5.0.0"
  }
}

组件代码示例 #

import React from "react";
import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

// STYLING
import 'primereact/resources/themes/lara-light-indigo/theme.css';
import { useState } from "react";

function Datatables() {
  const [isData, setIsData] = useState([
    {
      id: 1,
      title: 'try',
      text: 'try again'
    }
  ])
  return (
    <>
      <PrimeReactProvider>
        <DataTable
          value={isData}
          paginator
          rows={5}
          removableSort
          rowsPerPageOptions={[5, 10, 25, 50]}
          tableStyle={{ minWidth: '50rem' }}
        >
          <Column 
            field="title"
            header="Title"
            sortable
            style={{ width: '25%' }}
          />
        </DataTable>
      </PrimeReactProvider>
    </>
  )
}

export default Datatables;

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