Skip to content

Commit 1f96a2d

Browse files
wdh2100wdh2100
authored
Merge pull request #1772 from pisrcio/mui5
Upgrade to Material-UI 5
2 parents a4af697 + 30fa456 commit 1f96a2d

File tree

77 files changed

+346
-330
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+346
-330
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -361,11 +361,11 @@ Using Material-UI theme overrides will allow you to customize styling to your li
361361
```js
362362
import React from "react";
363363
import MUIDataTable from "mui-datatables";
364-
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
364+
import { createTheme, ThemeProvider } from '@material-ui/core/styles';
365365

366366
class BodyCellExample extends React.Component {
367367

368-
getMuiTheme = () => createMuiTheme({
368+
getMuiTheme = () => createTheme({
369369
overrides: {
370370
MUIDataTableBodyCell: {
371371
root: {
@@ -378,9 +378,9 @@ class BodyCellExample extends React.Component {
378378
render() {
379379

380380
return (
381-
<MuiThemeProvider theme={this.getMuiTheme()}>
381+
<ThemeProvider theme={this.getMuiTheme()}>
382382
<MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
383-
</MuiThemeProvider>
383+
</ThemeProvider>
384384
);
385385

386386
}

‎docs/icons/GitHub.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable max-len */
22

33
import React from 'react';
4-
import SvgIcon from '@material-ui/core/SvgIcon';
4+
import SvgIcon from '@mui/material/SvgIcon';
55

66
function GitHub(props) {
77
return (

‎docs/pages/index.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import Typography from '@material-ui/core/Typography';
4-
import IconButton from '@material-ui/core/IconButton';
5-
import Tooltip from '@material-ui/core/Tooltip';
6-
import DownloadIcon from '@material-ui/icons/CloudDownload';
7-
import BuildIcon from '@material-ui/icons/Build'; // eslint-disable-line import/no-unresolved
3+
import Typography from '@mui/material/Typography';
4+
import IconButton from '@mui/material/IconButton';
5+
import Tooltip from '@mui/material/Tooltip';
6+
import DownloadIcon from '@mui/icons-material/CloudDownload';
7+
import BuildIcon from '@mui/icons-material/Build'; // eslint-disable-line import/no-unresolved
88
import CodeSnippet from '../utils/CodeSnippet';
99
import Layout from '../utils/layout';
1010
import withRoot from '../utils/withRoot';
11-
import { withStyles } from '@material-ui/core/styles';
11+
import { withStyles } from '@mui/styles';
1212

1313
const styles = theme => ({
1414
stepIcon: {

‎docs/utils/CodeSnippet.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import clsx from 'clsx';
44
import prism from 'prismjs';
55
import 'prismjs/components/prism-jsx';
66
import 'prismjs/components/prism-bash';
7-
import Paper from '@material-ui/core/Paper';
8-
import { withStyles } from '@material-ui/core/styles';
7+
import Paper from '@mui/material/Paper';
8+
import { withStyles } from '@mui/styles';
99

1010
const styles = theme => ({});
1111

‎docs/utils/Menu.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { withStyles } from '@material-ui/core';
4-
import Drawer from '@material-ui/core/Drawer';
5-
import List from '@material-ui/core/List';
6-
import ListItem from '@material-ui/core/ListItem';
7-
import ListItemText from '@material-ui/core/ListItemText';
8-
import ListSubheader from '@material-ui/core/ListSubheader';
3+
import { withStyles } from '@mui/material';
4+
import Drawer from '@mui/material/Drawer';
5+
import List from '@mui/material/List';
6+
import ListItem from '@mui/material/ListItem';
7+
import ListItemText from '@mui/material/ListItemText';
8+
import ListSubheader from '@mui/material/ListSubheader';
99

1010
const styles = theme => ({
1111
list: {

‎docs/utils/getPageContext.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-disable no-underscore-dangle */
22

33
import { SheetsRegistry } from 'jss';
4-
import { createMuiTheme, createGenerateClassName } from '@material-ui/core/styles';
5-
import purple from '@material-ui/core/colors/purple';
6-
import green from '@material-ui/core/colors/green';
4+
import { createTheme, createGenerateClassName } from '@mui/material/styles';
5+
import purple from '@mui/material/colors/purple';
6+
import green from '@mui/material/colors/green';
77

88
// A theme with custom primary and secondary color.
99
// It's optional.
10-
const theme = createMuiTheme({
10+
const theme = createTheme({
1111
palette: {
1212
primary: purple,
1313
secondary: green,

‎docs/utils/layout.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import Head from 'next/head';
4-
import Typography from '@material-ui/core/Typography';
5-
import AppBar from '@material-ui/core/AppBar';
6-
import Toolbar from '@material-ui/core/Toolbar';
7-
import IconButton from '@material-ui/core/IconButton';
8-
import MenuIcon from '@material-ui/icons/Menu';
9-
import Tooltip from '@material-ui/core/Tooltip';
4+
import Typography from '@mui/material/Typography';
5+
import AppBar from '@mui/material/AppBar';
6+
import Toolbar from '@mui/material/Toolbar';
7+
import IconButton from '@mui/material/IconButton';
8+
import MenuIcon from '@mui/icons-material/Menu';
9+
import Tooltip from '@mui/material/Tooltip';
1010
import GitHub from '../icons/GitHub';
1111
import withRoot from '../utils/withRoot';
12-
import { withStyles } from '@material-ui/core/styles';
12+
import { withStyles } from '@mui/styles';
1313
import Menu from './Menu';
1414

1515
/* eslint-disable import/no-webpack-loader-syntax */

‎docs/utils/withRoot.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { MuiThemeProvider } from '@material-ui/core/styles';
3+
import { ThemeProvider } from '@mui/styles';
44
import getPageContext from './getPageContext';
55

66
function withRoot(Component) {
@@ -20,11 +20,11 @@ function withRoot(Component) {
2020
pageContext = null;
2121

2222
render() {
23-
// MuiThemeProvider makes the theme available down the React tree thanks to React context.
23+
// ThemeProvider makes the theme available down the React tree thanks to React context.
2424
return (
25-
<MuiThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
25+
<ThemeProvider theme={this.pageContext.theme} sheetsManager={this.pageContext.sheetsManager}>
2626
<Component {...this.props} />
27-
</MuiThemeProvider>
27+
</ThemeProvider>
2828
);
2929
}
3030
}

‎examples/Router/ExamplesGrid.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {Link} from "react-router-dom";
2-
import {Card, CardContent, Grid, Typography} from "@material-ui/core";
2+
import {Card, CardContent, Grid, Typography} from "@mui/material";
33
import React from "react";
44
import examples from "../examples";
5-
import {withStyles} from "@material-ui/core/styles/index";
6-
import TextField from '@material-ui/core/TextField';
5+
import {withStyles} from "@mui/styles";
6+
import TextField from '@mui/material/TextField';
77

88
const styles = {
99
container: {

‎examples/Router/index.js‎

Lines changed: 30 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
33
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
4-
import { withStyles } from '@material-ui/core/styles/index';
4+
import { withStyles } from '@mui/styles';
55
import ExamplesGrid from './ExamplesGrid';
66
import examples from '../examples';
7-
import Button from '@material-ui/core/Button';
7+
import Button from '@mui/material/Button';
88
import { withRouter } from 'react-router-dom';
9+
import { createTheme, ThemeProvider } from '@mui/material/styles';
910

1011
const styles = {
1112
root: {
@@ -27,31 +28,35 @@ class Examples extends React.Component {
2728

2829
var returnHomeStyle = { padding: '0px', margin: '20px 0 20px 0' };
2930

31+
const defaultTheme = createTheme();
32+
3033
return (
31-
<main className={classes.root}>
32-
<div className={classes.contentWrapper}>
33-
<Switch>
34-
<Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
35-
{Object.keys(examples).map((label, index) => (
36-
<Route
37-
key={index}
38-
path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
39-
exact
40-
component={examples[label]}
41-
/>
42-
))}
43-
</Switch>
44-
<div>
45-
{this.props.location.pathname !== '/' && (
46-
<div style={returnHomeStyle}>
47-
<Button color="primary" onClick={this.returnHome}>
48-
Back to Example Index
49-
</Button>
50-
</div>
51-
)}
34+
<ThemeProvider theme={defaultTheme}>
35+
<main className={classes.root}>
36+
<div className={classes.contentWrapper}>
37+
<Switch>
38+
<Route path="/" exact render={() => <ExamplesGrid examples={examples} />} />
39+
{Object.keys(examples).map((label, index) => (
40+
<Route
41+
key={index}
42+
path={`/${label.replace(/\s+/g, '-').toLowerCase()}`}
43+
exact
44+
component={examples[label]}
45+
/>
46+
))}
47+
</Switch>
48+
<div>
49+
{this.props.location.pathname !== '/' && (
50+
<div style={returnHomeStyle}>
51+
<Button color="primary" onClick={this.returnHome}>
52+
Back to Example Index
53+
</Button>
54+
</div>
55+
)}
56+
</div>
5257
</div>
53-
</div>
54-
</main>
58+
</main>
59+
</ThemeProvider>
5560
);
5661
}
5762
}

0 commit comments

Comments
 (0)