javascript - Material ui TypeError : palette. 主题未定义

Question

我正在尝试使用 mui 的 List 组件，只是安装了所需的依赖项。

错误是

TypeError: theme.palette is undefined
./node_modules/@mui/material/ListItem/ListItem.js/ListItemRoot<
node_modules/@mui/material/ListItem/ListItem.js:85

我的组件非常简单，它只是返回带有 ListItem 的列表项。该组件由带有元素属性的 react-router-dom 中的 Route 标签呈现

ProductList.jsx

import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
import { data } from "./data.json"

export const ProductsList = () => {
    return (
        <List>
            <ListItem>
                content
            </ListItem>
        </List>
    )
}

在硬编码路径“/217/cerveza-script”App.js 上呈现的组件

import React from 'react';
import {
    Routes,
    Route,
    useLocation
  } from "react-router-dom";
import { AdminHome } from "./admin/AdminHome"
import { NavbarAdmin } from '../components/admin/NavbarAdmin';
import { ClientsView } from "./admin/ClientsView"
import { NewClient } from './admin/NewClient';
import { Profile } from './Profile';
import { Settings } from "./admin/Settings";
import { Employees } from './owner/Employees';
import { OwnerHome } from './owner/OwnerHome';
import { Box } from '@chakra-ui/layout';
import { ProductsList } from '../components/menu/ProductsList';

const App = () => {
    return (
        <Box backgroundColor="gray.50" style={{height: "100vh"}}>
            <NavbarAdmin />
            <Routes>
                <Route exact path="/" element={ <AdminHome />}/>
                <Route exact path="/owner" element={ <OwnerHome />}/>
                <Route path="/clientes" element={ <ClientsView />}/>
                <Route path="/nuevousuario" element={ <NewClient />}/>
                <Route path="/perfil" element={ <Profile/> }/>
                <Route path="/ajustes" element={ <Settings /> }/>
                <Route path="/empleados" element={ <Employees /> }/>
                <Route path="/217/cerveza-script" element={ <ProductsList /> }/>
            </Routes>
        </Box>
    )
};

export default App;

我还在其余的 ui 组件中使用 ChakraUI(仅将 mui 用于列表和表格)

包.json

{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@chakra-ui/icons": "^1.1.1",
        "@chakra-ui/react": "^1.7.2",
        "@emotion/react": "^11.6.0",
        "@emotion/styled": "^11.3.0",
        "@material-ui/core": "^4.12.3",
        "@mui/material": "^5.0.6",
        "@reduxjs/toolkit": "^1.6.2",
        "@testing-library/jest-dom": "^5.15.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.24.0",
        "framer-motion": "^4.1.17",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-icons": "^4.3.1",
        "react-redux": "^7.2.6",
        "react-router-dom": "^6.0.2",
        "react-scripts": "4.0.3",
        "redux-logger": "^3.0.6",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

编辑:发布了错误的 package.json

Answer 1

在您的 ProductList.js 中，从 @material-ui/core/ 导入 List 和 ListItem 而不是@mui/material/.

改变这个，

import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'

对此，

import List from '@material-ui/core/List';    
import ListItem from '@material-ui/core/ListItem';