feat: Removed tss-react and replaced it with the default "styled" styling of mui.

examples/Router/ExamplesGrid.js

@@ -1,70 +1,88 @@
-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 "tss-react/mui";
+import { Link } from 'react-router-dom';
+import { styled } from '@mui/material/styles';
+import { Card, CardContent, Grid, Typography } from '@mui/material';
+import React from 'react';
+import examples from '../examples';
 import TextField from '@mui/material/TextField';
 
-const styles = {
-    container: {
-        flexGrow: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: 16,
-    },
-    card: {
-        '&:hover': {
-            background: 'lightgrey',
-            fontWeight: 500,
-        }
-    },
-    cardContent: {
-        '&:last-child': {
-            padding: 8,
-        }
+const PREFIX = 'ExamplesGrid';
+
+const classes = {
+  container: `${PREFIX}-container`,
+  card: `${PREFIX}-card`,
+  cardContent: `${PREFIX}-cardContent`,
+  link: `${PREFIX}-link`,
+  label: `${PREFIX}-label`,
+};
+
+// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed.
+const Root = styled('div')({
+  [`& .${classes.container}`]: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  [`& .${classes.card}`]: {
+    '&:hover': {
+      background: 'lightgrey',
+      fontWeight: 500,
     },
-    link: {
-        textDecoration: 'none',
+  },
+  [`& .${classes.cardContent}`]: {
+    '&:last-child': {
+      padding: 8,
     },
-    label: {
-        fontWeight: 'inherit'
-    }
-};
+  },
+  [`& .${classes.link}`]: {
+    textDecoration: 'none',
+  },
+  [`& .${classes.label}`]: {
+    fontWeight: 'inherit',
+  },
+});
 
 class ExamplesGrid extends React.Component {
-
   state = {
-    searchVal: ''
-  }
+    searchVal: '',
+  };
 
-  setSearchVal = (val) => {
+  setSearchVal = val => {
     this.setState({
-      searchVal: val
+      searchVal: val,
     });
-  }
+  };
 
   render() {
-    const {classes} = this.props;
-
     // Sort Examples alphabetically
     const examplesSorted = {};
-    Object.keys(examples).sort().forEach(function (key) {
+    Object.keys(examples)
+      .sort()
+      .forEach(function(key) {
         examplesSorted[key] = examples[key];
-    });
+      });
 
-    const examplesSortedKeys = Object.keys(examplesSorted).filter((item) => {
+    const examplesSortedKeys = Object.keys(examplesSorted).filter(item => {
       if (this.state.searchVal === '') return true;
       console.dir(item);
-      return item.toLowerCase().indexOf( this.state.searchVal.toLowerCase() ) !== -1 ? true : false;
+      return item.toLowerCase().indexOf(this.state.searchVal.toLowerCase()) !== -1 ? true : false;
     });
 
     return (
-      <React.Fragment>
-        <Typography variant="h5" align="center">Choose an Example</Typography>
-        <Typography variant="subtitle2" align="center">({examplesSortedKeys.length}) Examples</Typography>
+      <Root>
+        <Typography variant="h5" align="center">
+          Choose an Example
+        </Typography>
+        <Typography variant="subtitle2" align="center">
+          ({examplesSortedKeys.length}) Examples
+        </Typography>
 
-        <Typography variant="subtitle2" align="center" style={{margin:'10px'}}>
-          <TextField placeholder="Search Examples" value={this.state.searchVal} onChange={(e) => this.setSearchVal(e.target.value)} />
+        <Typography variant="subtitle2" align="center" style={{ margin: '10px' }}>
+          <TextField
+            placeholder="Search Examples"
+            value={this.state.searchVal}
+            onChange={e => this.setSearchVal(e.target.value)}
+          />
         </Typography>
 
         <Grid container className={classes.container} spacing={1}>
@@ -73,16 +91,18 @@ class ExamplesGrid extends React.Component {
               <Link className={classes.link} to={`/${label.replace(/\s+/g, '-').toLowerCase()}`}>
                 <Card className={classes.card}>
                   <CardContent className={classes.cardContent}>
-                    <Typography variant="subtitle1" className={classes.label} align="center">{label}</Typography>
+                    <Typography variant="subtitle1" className={classes.label} align="center">
+                      {label}
+                    </Typography>
                   </CardContent>
                 </Card>
               </Link>
             </Grid>
           ))}
         </Grid>
-      </React.Fragment>
+      </Root>
     );
   }
 }
 
-export default withStyles(ExamplesGrid, styles);
+export default ExamplesGrid;

examples/Router/index.js

@@ -1,23 +1,29 @@
 import React from 'react';
+import { createTheme, styled, ThemeProvider } from '@mui/material/styles';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
-import { withStyles } from 'tss-react/mui';
 import ExamplesGrid from './ExamplesGrid';
 import examples from '../examples';
 import Button from '@mui/material/Button';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 
-const styles = {
-  root: {
+const PREFIX = 'index';
+
+const classes = {
+  root: `${PREFIX}-root`,
+  contentWrapper: `${PREFIX}-contentWrapper`,
+};
+
+const StyledApp = styled(App)({
+  [`& .${classes.root}`]: {
     display: 'flex',
     justifyContent: 'center',
   },
-  contentWrapper: {
+  [`& .${classes.contentWrapper}`]: {
     width: '100%',
   },
-};
+});
 
 const muiCache = createCache({
   key: 'mui-datatables',
@@ -30,7 +36,7 @@ class Examples extends React.Component {
   };
 
   render() {
-    const { classes } = this.props;
+    const {} = this.props;
 
     var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
 
@@ -69,7 +75,7 @@ class Examples extends React.Component {
   }
 }
 
-const StyledExamples = withRouter(withStyles(Examples, styles));
+const StyledExamples = withRouter(Examples);
 
 function App() {
   return (
@@ -79,4 +85,4 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('app-root'));
+ReactDOM.render(<StyledApp />, document.getElementById('app-root'));

examples/column-filters/index.js

@@ -1,89 +1,86 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import MUIDataTable from "../../src/";
+import React from 'react';
+import MUIDataTable from '../../src/';
 
 class Example extends React.Component {
-
   render() {
-
     const columns = [
       {
-        name: "Name",
+        name: 'Name',
         options: {
           filter: true,
           filterList: ['Franky Miles'],
           customFilterListOptions: { render: v => `Name: ${v}` },
           filterOptions: {
-            names: ['a', 'b', 'c', 'Business Analyst']
+            names: ['a', 'b', 'c', 'Business Analyst'],
           },
-        }
+        },
       },
       {
-        name: "Title",
+        name: 'Title',
         options: {
           filter: true,
           filterList: ['Business Analyst'],
           customFilterListOptions: { render: v => `Title: ${v}` },
-          filterType: 'textField' // set filterType's at the column level
-        }
+          filterType: 'textField', // set filterType's at the column level
+        },
       },
       {
-        name: "Location",
+        name: 'Location',
         options: {
           filter: false,
-        }
+        },
       },
       {
-        name: "Age",
+        name: 'Age',
         options: {
-          customBodyRenderLite: (dataIndex) => {
+          customBodyRenderLite: dataIndex => {
             let val = data[dataIndex][3];
             return val;
           },
           filter: true,
           customFilterListOptions: { render: v => `Age: ${v}` },
-        }
+        },
       },
       {
-        name: "Salary",
+        name: 'Salary',
         options: {
           filter: true,
           customFilterListOptions: { render: v => `Salary: ${v}` },
-          sort: false
-        }
-      }
+          sort: false,
+        },
+      },
     ];
     const data = [
-      ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
-      ["Business Analyst", "Business Consultant", "Dallas",  55, 200000],
-      ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
-      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
-      ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
-      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
-      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
-      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
-      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
-      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
-      ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
-      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
-      ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
-      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
-      ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
-      ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
-      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
-      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
-      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
-      ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
-      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
-      ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
-      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
-      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
-      ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
-      ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
-      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
-      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
-      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
-      ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
+      ['Gabby George', 'Business Analyst', 'Minneapolis', 30, 100000],
+      ['Business Analyst', 'Business Consultant', 'Dallas', 55, 200000],
+      ['Jaden Collins', 'Attorney', 'Santa Ana', 27, 500000],
+      ['Franky Rees', 'Business Analyst', 'St. Petersburg', 22, 50000],
+      ['Aaren Rose', 'Business Consultant', 'Toledo', 28, 75000],
+      ['Blake Duncan', 'Business Management Analyst', 'San Diego', 65, 94000],
+      ['Frankie Parry', 'Agency Legal Counsel', 'Jacksonville', 71, 210000],
+      ['Lane Wilson', 'Commercial Specialist', 'Omaha', 19, 65000],
+      ['Robin Duncan', 'Business Analyst', 'Los Angeles', 20, 77000],
+      ['Mel Brooks', 'Business Consultant', 'Oklahoma City', 37, 135000],
+      ['Harper White', 'Attorney', 'Pittsburgh', 52, 420000],
+      ['Kris Humphrey', 'Agency Legal Counsel', 'Laredo', 30, 150000],
+      ['Frankie Long', 'Industrial Analyst', 'Austin', 31, 170000],
+      ['Brynn Robbins', 'Business Analyst', 'Norfolk', 22, 90000],
+      ['Justice Mann', 'Business Consultant', 'Chicago', 24, 133000],
+      ['Addison Navarro', 'Business Management Analyst', 'New York', 50, 295000],
+      ['Jesse Welch', 'Agency Legal Counsel', 'Seattle', 28, 200000],
+      ['Eli Mejia', 'Commercial Specialist', 'Long Beach', 65, 400000],
+      ['Gene Leblanc', 'Industrial Analyst', 'Hartford', 34, 110000],
+      ['Danny Leon', 'Computer Scientist', 'Newark', 60, 220000],
+      ['Lane Lee', 'Corporate Counselor', 'Cincinnati', 52, 180000],
+      ['Jesse Hall', 'Business Analyst', 'Baltimore', 44, 99000],
+      ['Danni Hudson', 'Agency Legal Counsel', 'Tampa', 37, 90000],
+      ['Terry Macdonald', 'Commercial Specialist', 'Miami', 39, 140000],
+      ['Justice Mccarthy', 'Attorney', 'Tucson', 26, 330000],
+      ['Silver Carey', 'Computer Scientist', 'Memphis', 47, 250000],
+      ['Franky Miles', 'Industrial Analyst', 'Buffalo', 49, 190000],
+      ['Glen Nixon', 'Corporate Counselor', 'Arlington', 44, 80000],
+      ['Gabby Strickland', 'Business Process Consultant', 'Scottsdale', 26, 45000],
+      ['Mason Ray', 'Computer Scientist', 'San Francisco', 39, 142000],
     ];
 
     const options = {
@@ -97,10 +94,7 @@ class Example extends React.Component {
       rowsPerPage: 10,
     };
 
-    return (
-      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
-    );
-
+    return <MUIDataTable title={'ACME Employee list'} data={data} columns={columns} options={options} />;
   }
 }