最新版本的 Material UI 日历样式不起作用

问：

我正在使用 React 开发 Material UI（有关版本，请参阅 Package json）。尝试实现日历功能。但是同样的CSS不起作用。想尝试在索引.html上添加CDN技巧，但在MUI文档中，它严格不建议用于生产环境。

以下是 MUI 和 React 版本的 package.json 详细信息：

{
  "name": "date_picker_react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@mui/x-date-pickers-pro": "^6.18.1",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.30.0",
    "dayjs": "^1.11.10",
    "react-date-range": "^1.4.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.1",
    "web-vitals": "^2.1.4"
  },

我的 App.jsx 代码：

import{Chip, Divider} from '@mui/material';
import CalenderComp from './components/CalenderComp.jsx';
import './App.css';

function App() {
  return (
    <>
      <Divider><Chip label="Calender"/></Divider>
      <CalenderComp />
      
    </>
  );
}

export default App;

我的日历组件代码：

import { useState} from 'react';
import { TextField } from '@mui/material';
import React from 'react'
import { Calendar } from 'react-date-range';

function CalenderComp() {

  const [calendar, setCalender] = useState('');
  const [open, setOpen] = useState(false);

  function handleSelect(date){
    console.log(date);
  }
  return (
    <div style={{'textAlign': 'center'}}>
      <TextField 
      label="Select Date"
      name="date"
      variant='outlined'
      value={calendar}
      onClick={()=> setOpen(open => !open)}
      />
      <br />

      {open &&
      <Calendar 
      date = {new Date()}
      onChange={handleSelect}
      />}
    </div>
  )
}

export default CalenderComp

当我单击文本字段查看日历时的最终输出：

输出截图

为什么CSS如此荒谬？我确实安装了 MUI，因为它在 MUI 网站中描述。请帮忙。

我尝试在npm上重新安装MUI，但仍然无法正常工作