Merge pull request #1862 from Fullbusters/mui-styles-remove-1826

1826 remove @mui/styles from project

README.md

@@ -37,7 +37,7 @@ Version 3 has been released! You can read about the [updates here](https://githu
 
 `npm install mui-datatables --save`
 
-If your project doesn't already use them, you need to install `@mui/material`, `@mui/icons-material` as well.
+If your project doesn't already use them, you need to install `@mui/material`,  `@mui/icons-material` and `tss-react` as well.
 
 ## Compatibility
 

docs/pages/index.js

@@ -8,7 +8,7 @@ import BuildIcon from '@mui/icons-material/Build'; // eslint-disable-line import
 import CodeSnippet from '../utils/CodeSnippet';
 import Layout from '../utils/layout';
 import withRoot from '../utils/withRoot';
-import { withStyles } from '@mui/styles';
+import { withStyles } from 'tss-react/mui';
 
 const styles = theme => ({
   stepIcon: {
@@ -85,4 +85,4 @@ const options = {
   }
 }
 
-export default withRoot(withStyles(styles)(Homepage));
+export default withRoot(withStyles(Homepage, styles));

docs/utils/CodeSnippet.js

@@ -5,7 +5,7 @@ import prism from 'prismjs';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/components/prism-bash';
 import Paper from '@mui/material/Paper';
-import { withStyles } from '@mui/styles';
+import { withStyles } from 'tss-react/mui';
 
 const styles = theme => ({});
 
@@ -34,4 +34,4 @@ class CodeSnippet extends React.Component {
   }
 }
 
-export default withStyles(styles)(CodeSnippet);
+export default withStyles(CodeSnippet, styles);

docs/utils/layout.js

@@ -9,7 +9,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Tooltip from '@mui/material/Tooltip';
 import GitHub from '../icons/GitHub';
 import withRoot from '../utils/withRoot';
-import { withStyles } from '@mui/styles';
+import { withStyles } from 'tss-react/mui';
 import Menu from './Menu';
 
 /* eslint-disable import/no-webpack-loader-syntax  */
@@ -100,4 +100,4 @@ class Layout extends React.Component {
   }
 }
 
-export default withRoot(withStyles(styles)(Layout));
+export default withRoot(withStyles(Layout, styles));

docs/utils/withRoot.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ThemeProvider } from '@mui/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import getPageContext from './getPageContext';
 
 function withRoot(Component) {

examples/Router/ExamplesGrid.js

@@ -2,7 +2,7 @@ import {Link} from "react-router-dom";
 import {Card, CardContent, Grid, Typography} from "@mui/material";
 import React from "react";
 import examples from "../examples";
-import {withStyles} from "@mui/styles";
+import { withStyles } from "tss-react/mui";
 import TextField from '@mui/material/TextField';
 
 const styles = {
@@ -85,4 +85,4 @@ class ExamplesGrid extends React.Component {
   }
 }
 
-export default withStyles(styles)(ExamplesGrid);
+export default withStyles(ExamplesGrid, styles);

examples/Router/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route, Switch } from 'react-router-dom';
-import { withStyles } from '@mui/styles';
+import { withStyles } from "tss-react/mui";
 import ExamplesGrid from './ExamplesGrid';
 import examples from '../examples';
 import Button from '@mui/material/Button';
@@ -61,7 +61,7 @@ class Examples extends React.Component {
   }
 }
 
-const StyledExamples = withRouter(withStyles(styles)(Examples));
+const StyledExamples = withRouter(withStyles(Examples, styles));
 
 function App() {
   return (

examples/custom-components/TableViewCol.js

@@ -6,9 +6,9 @@ import Button from '@mui/material/Button';
 import FormControl from '@mui/material/FormControl';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from "tss-react/mui";
 
-const useStyles = makeStyles(
+const useStyles = makeStyles()(
   theme => ({
     root: {
       padding: '16px 24px 16px 24px',
@@ -43,7 +43,7 @@ const useStyles = makeStyles(
 );
 
 const TableViewCol = ({ columns, options, components = {}, onColumnUpdate, updateColumns }) => {
-  const classes = useStyles();
+  const { classes } = useStyles();
   const textLabels = options.textLabels.viewColumns;
   const CheckboxComponent = components.Checkbox || Checkbox;
 

examples/customize-footer/CustomFooter.js

@@ -3,7 +3,7 @@ import TableFooter from "@mui/material/TableFooter";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
 import MuiTablePagination from "@mui/material/TablePagination";
-import { withStyles } from "@mui/styles";
+import { withStyles } from "tss-react/mui";
 
 const defaultFooterStyles = {
 };
@@ -58,4 +58,4 @@ class CustomFooter extends React.Component {
 
 }
 
-export default withStyles(defaultFooterStyles, { name: "CustomFooter" })(CustomFooter);
+export default withStyles(CustomFooter, defaultFooterStyles, { name: "CustomFooter" });

examples/customize-footer/index.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import MUIDataTable from '../../src/';
 import CustomFooter from './CustomFooter';
-import { makeStyles } from '@mui/styles';
+import { makeStyles } from "tss-react/mui";
+
 import TableFooter from '@mui/material/TableFooter';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
@@ -10,7 +11,7 @@ import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import clsx from 'clsx';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   footerCell: {
     backgroundColor: theme.palette.background.paper,
     borderBottom: 'none',
@@ -25,7 +26,7 @@ const useStyles = makeStyles(theme => ({
 function Example() {
   const [resizableColumns, setResizableColumns] = useState(false);
   const [stickyFooter, setStickyFooter] = useState(true);
-  const classes = useStyles();
+  const { classes } = useStyles();
 
   const columns = ['Name', 'Title', 'Location', 'Age', 'Salary'];
 

examples/customize-search-render/CustomSearchRender.js

@@ -3,7 +3,7 @@ import Grow from '@mui/material/Grow';
 import TextField from '@mui/material/TextField';
 import IconButton from '@mui/material/IconButton';
 import ClearIcon from '@mui/icons-material/Clear';
-import { withStyles } from '@mui/styles';
+import { withStyles } from "tss-react/mui";
 
 const defaultSearchStyles = theme => ({
   main: {
@@ -65,4 +65,4 @@ class CustomSearchRender extends React.Component {
   }
 }
 
-export default withStyles(defaultSearchStyles, { name: 'CustomSearchRender' })(CustomSearchRender);
+export default withStyles(CustomSearchRender, defaultSearchStyles, { name: 'CustomSearchRender' });

examples/customize-styling/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import MUIDataTable from '../../src/';
-import { ThemeProvider, withStyles } from '@mui/styles';
+import { ThemeProvider } from '@mui/material/styles';
+import { withStyles } from "tss-react/mui";
 import { createTheme } from '@mui/material/styles';
 import Switch from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
@@ -218,4 +219,4 @@ class Example extends React.Component {
   }
 }
 
-export default withStyles(customStyles, { name: 'ExampleCard.js' })(Example);
+export default withStyles(Example, customStyles, { name: 'ExampleCardjs' });

examples/customize-toolbar/CustomToolbar.js

@@ -2,8 +2,7 @@ import React from "react";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import AddIcon from "@mui/icons-material/Add";
-import { withStyles } from "@mui/styles";
-
+import { withStyles } from "tss-react/mui";
 const defaultToolbarStyles = {
   iconButton: {
   },
@@ -31,4 +30,4 @@ class CustomToolbar extends React.Component {
 
 }
 
-export default withStyles(defaultToolbarStyles, { name: "CustomToolbar" })(CustomToolbar);
+export default withStyles(CustomToolbar, defaultToolbarStyles, { name: "CustomToolbar" });

examples/customize-toolbarselect/CustomToolbarSelect.js

@@ -4,7 +4,7 @@ import Tooltip from "@mui/material/Tooltip";
 import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
 import IndeterminateCheckBoxIcon from "@mui/icons-material/IndeterminateCheckBox";
 import BlockIcon from "@mui/icons-material/Block";
-import { withStyles } from "@mui/styles";
+import { withStyles } from "tss-react/mui";
 
 const defaultToolbarSelectStyles = {
   iconButton: {
@@ -63,4 +63,4 @@ class CustomToolbarSelect extends React.Component {
   }
 }
 
-export default withStyles(defaultToolbarSelectStyles, { name: "CustomToolbarSelect" })(CustomToolbarSelect);
+export default withStyles(CustomToolbarSelect, defaultToolbarSelectStyles, { name: "CustomToolbarSelect" });

examples/expandable-rows/index.js

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import MUIDataTable, {ExpandButton} from "../../src/";
 import TableRow from "@mui/material/TableRow";
 import TableCell from "@mui/material/TableCell";
-import { ThemeProvider } from "@mui/styles";
+import { ThemeProvider } from '@mui/material/styles';
 import { createTheme } from "@mui/material/styles";
 
 class Example extends React.Component {

examples/infinite-scrolling/index.js

@@ -2,7 +2,6 @@ import React, { Fragment, Component } from "react";
 import { Waypoint } from "react-waypoint";
 import PropTypes from "prop-types";
 import MUIDataTable from "../../src/";
-import { ThemeProvider } from "@mui/styles";
 import { createTheme } from "@mui/material/styles";
 import {
   Table,
@@ -12,7 +11,7 @@ import {
   TableRow,
   Paper
 } from "@mui/material";
-import { withStyles } from "@mui/styles";
+import { withStyles } from "tss-react/mui";
 
 const styles = theme => ({
   root: {
@@ -187,4 +186,4 @@ MessageManager.propTypes = {
   classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(MessageManager);
+export default withStyles(MessageManager, styles);

examples/themes/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import MUIDataTable from '../../src/';
-import {ThemeProvider} from '@mui/styles';
+import { ThemeProvider } from '@mui/material/styles';
+
 import {createTheme} from '@mui/material/styles';
 
 class Example extends React.Component {