我正在尝试使用Material UI，但在React v.18.2中遇到问题。我需要导入以下内容：

import { MuiThemeProvider, createTheme } from '@material-ui/core/styles'

但是当我运行npm install @material-ui/styles时，我得到了这个错误：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: zscratch@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/styles@4.11.5
npm ERR! node_modules/@material-ui/styles
npm ERR!   @material-ui/styles@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

我试过运行下面的per this SO answer，他们确实安装了，但没有任何帮助：

npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest
npm install @mui/icons-material@latest

以下是我的依赖项。

"dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@fontsource/roboto": "^4.5.8",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-geolocated": "^4.0.3",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

底线：我需要做些什么才能导入所需的内容？