MUI：提供的 `styles` 参数无效。在上下文中没有主题的功能。父元素之一需要使用 ThemeProvider

Question

我正在尝试使用 mui v5

中的 mui-datatables 构建一个 table

这个错误是什么意思？

index.js:1 MUI：提供的 styles 参数无效。您提供的功能在上下文中没有主题。父元素之一需要使用 ThemeProvider。

NewsWatch.js

import React from "react";
import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
  ["Joe James", "Test Corp", "Yonkers", "NY"],
  ["John Walsh", "Test Corp", "Hartford", "CT"],
  ["Bob Herm", "Test Corp", "Tampa", "FL"],
  ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: "checkbox",
};

const NewsTable = () => {
  return (
    <>
      <MUIDataTable
        title={"Employee List"}
        data={data}
        columns={columns}
        options={options}
      />
    </>
  );
};

export default NewsTable;

Answer 1

MUI-Datatables lib 严重依赖@mui 或（如前所述@material-ui），它需要两个重要的东西才能存在

用来自 MUI

import { ThemeProvider } from "@mui/material";

import { responsiveFontSizes, createTheme } from "@mui/material";

export const themeOptions: ThemeOptions = {
   // ... any theme customiztion you can write here
}

let theme = responsiveFontSizes(createTheme(themeOptions));

并用提供程序包装根目录

            <ThemeProvider theme={theme}>

                {children}

            </ThemeProvider>

在你的项目中安装图标库（因为它内部需要它）

yarn add @mui/icons-material # or npm i @mui/icons-material

MUI：提供的 `styles` 参数无效。在上下文中没有主题的功能。父元素之一需要使用 ThemeProvider

MUI: The `styles` argument provided is invalid. function without a theme in the context. One of the parent elements needs to use a ThemeProvider

material-ui

mui-datatable