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

Question

I am trying to build a table using mui-datatables in mui v5

What does this error mean?

index.js:1 MUI: The styles argument provided is invalid. You are providing a function without a theme in the context. One of the parent elements needs to use a 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 depends heavily on @mui or(as known previously @material-ui), and it needs two important things to exist

1. Wrap your root components/pages with a theme provider from 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));

and wrap the root with the provider

            <ThemeProvider theme={theme}>

                {children}

            </ThemeProvider>

2. Install the icons' library in your project(because it internally needs it)

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