fiddling with upgrading react
This commit is contained in:
parent
78c8c326ce
commit
58a91a937b
GPG Key ID:
A55BA3536A5E0ED7
962
package-lock.json
generated
962
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
@ -19,13 +19,16 @@
|
||||
},
|
||||
"homepage": "https://github.com/Sarsoo/Mixonomer#readme",
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.11.3",
|
||||
"@material-ui/icons": "^4.11.2",
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^6.1.3",
|
||||
"@mui/material": "^6.1.3",
|
||||
"@mui/styles": "^6.1.3",
|
||||
"axios": "^1.7.2",
|
||||
"chart.js": "^4.4.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-router-dom": "^5.2.0"
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.22.10",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
import { Paper, Tabs, Tab} from '@mui/material';
|
||||
|
||||
|
||||
import Lock from "./Lock.js";
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
import { Card, Button, ButtonGroup, CardContent, CardActions, Typography } from "@mui/material";
|
||||
|
||||
/**
|
||||
* Admin functions card component
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Card, CardContent, Typography, Grid } from '@mui/material';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { Card, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Card, CardContent, Typography, Grid } from '@mui/material';
|
||||
|
||||
/**
|
||||
* Into card for the home page
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Switch } from "react-router-dom";
|
||||
|
||||
import NotFound from "./Error/NotFound.js";
|
||||
import Progress from "./Util/circularProgress.js";
|
||||
@ -7,18 +7,20 @@ import showMessage from "./Toast.js";
|
||||
|
||||
import GlobalTheme from './Theme.js';
|
||||
|
||||
import { ThemeProvider } from '@material-ui/core/styles';
|
||||
import { ThemeProvider, StyledEngineProvider } from '@mui/styles';
|
||||
|
||||
import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@material-ui/core';
|
||||
import {AppBar, Toolbar, IconButton, Drawer, List, Divider, ListItem, ListItemIcon, ListItemText, Typography} from '@mui/material';
|
||||
|
||||
import MenuIcon from '@material-ui/icons/Menu';
|
||||
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
|
||||
import HomeIcon from '@material-ui/icons/Home';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
|
||||
import HomeIcon from '@mui/icons-material/Home';
|
||||
|
||||
import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@material-ui/icons'
|
||||
import { Build, QueueMusic, ExitToApp, AccountCircle, KeyboardBackspace, GroupWork, Policy } from '@mui/icons-material'
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
import Playlists from './Playlist/AllPlaylistsRouter';
|
||||
|
||||
const LazyIndex = React.lazy(() => import(/* webpackChunkName: "index" */ "./Index/Index"))
|
||||
const LazyPlaylists = React.lazy(() => import(/* webpackChunkName: "allPlaylists" */ "./Playlist/AllPlaylistsRouter"))
|
||||
const LazyPlaylistView = React.lazy(() => import(/* webpackChunkName: "playlist" */ "./Playlist/View/PlaylistRouter"))
|
||||
@ -89,110 +91,117 @@ class MusicTools extends Component {
|
||||
|
||||
render(){
|
||||
return (
|
||||
<Router>
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
(<Router>
|
||||
{/*<StyledEngineProvider injectFirst>*/}
|
||||
<ThemeProvider theme={GlobalTheme}>
|
||||
|
||||
{/* TOP APP BAR */}
|
||||
{/* TOP APP BAR */}
|
||||
|
||||
<AppBar position="sticky">
|
||||
<Toolbar>
|
||||
<IconButton edge="start" color="inherit" aria-label="menu" onClick={(e) => this.setOpen(true)}>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6">
|
||||
<Link to='/app/playlists' style={{textDecoration: 'none'}}>
|
||||
<div className="title-small">
|
||||
<h1 >Mixonomer</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<AppBar position="sticky">
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
onClick={(e) => this.setOpen(true)}
|
||||
size="large">
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6">
|
||||
<Link to='/app/playlists' style={{textDecoration: 'none'}}>
|
||||
<div className="title-small">
|
||||
<h1 >Mixonomer</h1>
|
||||
</div>
|
||||
</Link>
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
{/* MENU DRAWER */}
|
||||
{/* MENU DRAWER */}
|
||||
|
||||
<Drawer
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={this.state.drawerOpen}
|
||||
onClose={(e) => this.setOpen(false)}
|
||||
>
|
||||
<div>
|
||||
<IconButton onClick={(e) => this.setOpen(false)}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
role="presentation"
|
||||
onClick={(e) => this.setOpen(false)}
|
||||
onKeyDown={(e) => this.setOpen(false)}
|
||||
<Drawer
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={this.state.drawerOpen}
|
||||
onClose={(e) => this.setOpen(false)}
|
||||
>
|
||||
<List>
|
||||
{/* PLAYLISTS */}
|
||||
<ListItem button key="playlists" component={Link} to='/app/playlists'>
|
||||
<ListItemIcon><QueueMusic /></ListItemIcon>
|
||||
<ListItemText primary="Playlists" />
|
||||
</ListItem>
|
||||
|
||||
{/* TAGS */}
|
||||
<ListItem button key="tags" component={Link} to='/app/tags'>
|
||||
<ListItemIcon><GroupWork /></ListItemIcon>
|
||||
<ListItemText primary="Tags" />
|
||||
</ListItem>
|
||||
|
||||
{/* SETTINGS */}
|
||||
<ListItem button key="settings" component={Link} to='/app/settings/password'>
|
||||
<ListItemIcon><Build /></ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItem>
|
||||
|
||||
{/* ADMIN */}
|
||||
{ this.state.type == 'admin' &&
|
||||
<ListItem button key="admin" component={Link} to='/app/admin/lock'>
|
||||
<ListItemIcon><AccountCircle /></ListItemIcon>
|
||||
<ListItemText primary="Admin" />
|
||||
<div>
|
||||
<IconButton onClick={(e) => this.setOpen(false)} size="large">
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<div
|
||||
role="presentation"
|
||||
onClick={(e) => this.setOpen(false)}
|
||||
onKeyDown={(e) => this.setOpen(false)}
|
||||
>
|
||||
<List>
|
||||
{/* PLAYLISTS */}
|
||||
<ListItem button key="playlists" component={Link} to='/app/playlists'>
|
||||
<ListItemIcon><QueueMusic /></ListItemIcon>
|
||||
<ListItemText primary="Playlists" />
|
||||
</ListItem>
|
||||
}
|
||||
|
||||
<ListItem button key="privacy" onClick={(e) => { window.location.href = '/privacy' }}>
|
||||
<ListItemIcon><Policy /></ListItemIcon>
|
||||
<ListItemText primary="Privacy" />
|
||||
</ListItem>
|
||||
{/* TAGS */}
|
||||
<ListItem button key="tags" component={Link} to='/app/tags'>
|
||||
<ListItemIcon><GroupWork /></ListItemIcon>
|
||||
<ListItemText primary="Tags" />
|
||||
</ListItem>
|
||||
|
||||
{/* LOGOUT */}
|
||||
<ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}>
|
||||
<ListItemIcon><KeyboardBackspace /></ListItemIcon>
|
||||
<ListItemText primary="Logout" />
|
||||
</ListItem>
|
||||
{/* SETTINGS */}
|
||||
<ListItem button key="settings" component={Link} to='/app/settings/password'>
|
||||
<ListItemIcon><Build /></ListItemIcon>
|
||||
<ListItemText primary="Settings" />
|
||||
</ListItem>
|
||||
|
||||
{/* SARSOO.XYZ */}
|
||||
<ListItem button key="sarsoo.xyz" onClick={(e) => { window.location.href = 'https://sarsoo.xyz' }}>
|
||||
<ListItemIcon><ExitToApp /></ListItemIcon>
|
||||
<ListItemText primary="sarsoo.xyz" />
|
||||
</ListItem>
|
||||
</List>
|
||||
{/* ADMIN */}
|
||||
{ this.state.type == 'admin' &&
|
||||
<ListItem button key="admin" component={Link} to='/app/admin/lock'>
|
||||
<ListItemIcon><AccountCircle /></ListItemIcon>
|
||||
<ListItemText primary="Admin" />
|
||||
</ListItem>
|
||||
}
|
||||
|
||||
<ListItem button key="privacy" onClick={(e) => { window.location.href = '/privacy' }}>
|
||||
<ListItemIcon><Policy /></ListItemIcon>
|
||||
<ListItemText primary="Privacy" />
|
||||
</ListItem>
|
||||
|
||||
{/* LOGOUT */}
|
||||
<ListItem button key="logout" onClick={(e) => { window.location.href = '/auth/logout' }}>
|
||||
<ListItemIcon><KeyboardBackspace /></ListItemIcon>
|
||||
<ListItemText primary="Logout" />
|
||||
</ListItem>
|
||||
|
||||
{/* SARSOO.XYZ */}
|
||||
<ListItem button key="sarsoo.xyz" onClick={(e) => { window.location.href = 'https://sarsoo.xyz' }}>
|
||||
<ListItemIcon><ExitToApp /></ListItemIcon>
|
||||
<ListItemText primary="sarsoo.xyz" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
{/* ROUTER SWITCH */}
|
||||
|
||||
<div className="full-width">
|
||||
<Routes>
|
||||
{/*<React.Suspense fallback={<Progress/>}>*/}
|
||||
{/* <Route path="/app" exact component={LazyIndex} />*/}
|
||||
<Route path="/app/playlists" element={<Playlists/>} />
|
||||
{/*<Route path="/app/tags" component={LazyTags} />*/}
|
||||
{/*<Route path="/app/tag/:tag_id" component={LazyTag} />*/}
|
||||
{/*<Route path="/app/settings" component={LazySettings} />*/}
|
||||
{/*{ this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }*/}
|
||||
{/*<Route path='/app/playlist/:name' component={LazyPlaylistView} />*/}
|
||||
{/*</React.Suspense>*/}
|
||||
{/*<Route component={NotFound} />*/}
|
||||
</Routes>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
{/* ROUTER SWITCH */}
|
||||
|
||||
<div className="full-width">
|
||||
<Switch>
|
||||
<React.Suspense fallback={<Progress/>}>
|
||||
<Route path="/app" exact component={LazyIndex} />
|
||||
<Route path="/app/playlists" component={LazyPlaylists} />
|
||||
<Route path="/app/tags" component={LazyTags} />
|
||||
<Route path="/app/tag/:tag_id" component={LazyTag} />
|
||||
<Route path="/app/settings" component={LazySettings} />
|
||||
{ this.state.type == 'admin' && <Route path="/app/admin" component={LazyAdmin} /> }
|
||||
<Route path='/app/playlist/:name' component={LazyPlaylistView} />
|
||||
</React.Suspense>
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
{/*</StyledEngineProvider>*/}
|
||||
</Router>)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -14,10 +14,10 @@ class Playlists extends Component {
|
||||
<Switch>
|
||||
|
||||
{/* PLAYLIST LIST */}
|
||||
<Route exact path={`${this.props.match.url}/`} component={PlaylistsView} />
|
||||
<Route exact path={`${this.props.match.url}/`} element={PlaylistsView} />
|
||||
|
||||
{/* NEW PLAYLIST */}
|
||||
<Route path={`${this.props.match.url}/new`} component={NewPlaylist} />
|
||||
<Route path={`${this.props.match.url}/new`} element={NewPlaylist} />
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Card, Button, FormControl, TextField, InputLabel, Select, CardActions, CardContent, Typography, Grid } from '@mui/material';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
|
||||
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
|
||||
const axios = require('axios');
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Card, Button, CardActions, CardContent, Typography, Grid } from '@mui/material';
|
||||
|
||||
import showMessage from "../../Toast.js"
|
||||
|
||||
|
||||
@ -2,9 +2,9 @@ import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, FormControl, TextField, InputLabel, Select, FormControlLabel,
|
||||
CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@material-ui/core';
|
||||
import { Delete } from '@material-ui/icons';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
CardActions, CardContent, Typography, Grid, MenuItem, Switch } from '@mui/material';
|
||||
import { Delete } from '@mui/icons-material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
|
||||
import showMessage from "../../Toast.js";
|
||||
import Progress from "../../Util/circularProgress.js";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
import { Route, Link, Routes } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@mui/material';
|
||||
|
||||
|
||||
import {Edit} from "./Edit.js";
|
||||
@ -49,14 +49,14 @@ class View extends Component{
|
||||
<Tab label="Count" component={Link} to={`${this.props.match.url}/count`} />
|
||||
</Tabs>
|
||||
</Paper>
|
||||
<Switch>
|
||||
<Routes>
|
||||
|
||||
{/* VIEW/EDIT */}
|
||||
<Route path={`${this.props.match.url}/edit`} render={(props) => <Edit {...props} name={this.props.match.params.name}/>} />
|
||||
|
||||
{/* STATS */}
|
||||
<Route path={`${this.props.match.url}/count`} render={(props) => <Count {...props} name={this.props.match.params.name}/>} />
|
||||
</Switch>
|
||||
</Routes>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
import { Card, Grid, Button, TextField, CardContent, CardActions, Typography } from "@mui/material";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@material-ui/core";
|
||||
import { Card, Button, CardContent, CardActions, Typography, TextField, Grid } from "@mui/material";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Route, Link, Switch } from "react-router-dom";
|
||||
import { Paper, Tabs, Tab} from '@material-ui/core';
|
||||
import { Paper, Tabs, Tab} from '@mui/material';
|
||||
|
||||
import ChangePassword from "./ChangePassword.js";
|
||||
import SpotifyLink from "./SpotifyLink.js";
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, CardContent, CardActions, Typography } from "@material-ui/core";
|
||||
import { Card, Button, CardContent, CardActions, Typography } from "@mui/material";
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@material-ui/core';
|
||||
import { Card, Button, TextField, CardActions, CardContent, Typography, Grid } from '@mui/material';
|
||||
|
||||
import showMessage from "../Toast.js"
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@material-ui/core';
|
||||
import { Button, ButtonGroup, Typography, Card, CardActions, CardContent, Grid } from '@mui/material';
|
||||
|
||||
const axios = require('axios');
|
||||
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import React, { Component } from "react";
|
||||
const axios = require('axios');
|
||||
|
||||
import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@material-ui/core';
|
||||
import { Delete, ExitToApp } from '@material-ui/icons';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { Card, Button, ButtonGroup, CardActions, CardContent, FormControl, InputLabel, Select, Typography, Grid, TextField, MenuItem, FormControlLabel, Switch } from '@mui/material';
|
||||
import { Delete, ExitToApp } from '@mui/icons-material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
|
||||
import showMessage from "../Toast.js";
|
||||
import Progress from "../Util/circularProgress.js"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { createTheme, responsiveFontSizes } from '@material-ui/core/styles';
|
||||
import { createTheme, adaptV4Theme, responsiveFontSizes } from '@mui/material/styles';
|
||||
|
||||
let GlobalTheme = createTheme({
|
||||
let GlobalTheme = createTheme(adaptV4Theme({
|
||||
root: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
@ -22,7 +22,7 @@ let GlobalTheme = createTheme({
|
||||
spacing: 5
|
||||
},
|
||||
palette: {
|
||||
type: 'dark',
|
||||
mode: 'dark',
|
||||
// https://colorhunt.co/palette/907fa4a58faaa6d6d6ededd0
|
||||
primary: {
|
||||
main: '#907FA4',
|
||||
@ -41,7 +41,7 @@ let GlobalTheme = createTheme({
|
||||
status: {
|
||||
danger: 'orange',
|
||||
}
|
||||
});
|
||||
}));
|
||||
GlobalTheme = responsiveFontSizes(GlobalTheme);
|
||||
|
||||
export default GlobalTheme;
|
||||
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { Grid, CircularProgress } from '@material-ui/core';
|
||||
import { Grid, CircularProgress } from '@mui/material';
|
||||
|
||||
function Progress (props) {
|
||||
return (
|
||||
|
||||
@ -1,8 +1,20 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import { ThemeProvider, StyledEngineProvider, makeStyles } from '@mui/styles';
|
||||
import { createTheme, adaptV4Theme } from '@mui/material/styles';
|
||||
|
||||
import MusicTools from "./MusicTools";
|
||||
|
||||
const theme = createTheme();
|
||||
|
||||
const useStyles = makeStyles((theme) => {
|
||||
root: {
|
||||
// some CSS that accesses the theme
|
||||
}
|
||||
});
|
||||
|
||||
// ROOT file for bootstrapping the Mixonomer component and app
|
||||
|
||||
ReactDOM.render(<MusicTools />, document.getElementById('react'));
|
||||
// ReactDOM.render(<MusicTools theme={theme} />, document.getElementById('react'));
|
||||
const root = createRoot(document.getElementById('react')); // createRoot(container!) if you use TypeScript
|
||||
root.render(<MusicTools theme={theme} />);
|
||||
Loading…
Reference in New Issue
Block a user