From a177e784809d43500dfd8dee9cf1407af931791e Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Tue, 16 Apr 2024 14:14:50 +0200
Subject: [PATCH] Use tss in place of the deprecated @mui/styles
---
package-lock.json | 25 +++++++++++++++++++++++++
package.json | 1 +
src/App.tsx | 6 +++---
3 files changed, 29 insertions(+), 3 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index cc69bf9..4e4d2f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
"@types/react-dom": "^17.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
+ "tss-react": "^4.9.6",
"typescript": "^4.1.3"
},
"devDependencies": {
@@ -19955,6 +19956,30 @@
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
"dev": true
},
+ "node_modules/tss-react": {
+ "version": "4.9.6",
+ "resolved": "https://registry.npmjs.org/tss-react/-/tss-react-4.9.6.tgz",
+ "integrity": "sha512-JscsxykbRtcMHXH1Wa2JOlk0jJeT0P3n+mPh775SKImBgMTdRX/MmdB1leoZZrCFXPeZ/FSU9Ix5sImvdUC39Q==",
+ "dependencies": {
+ "@emotion/cache": "*",
+ "@emotion/serialize": "*",
+ "@emotion/utils": "*"
+ },
+ "peerDependencies": {
+ "@emotion/react": "^11.4.1",
+ "@emotion/server": "^11.4.0",
+ "@mui/material": "^5.0.0",
+ "react": "^16.8.0 || ^17.0.2 || ^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/server": {
+ "optional": true
+ },
+ "@mui/material": {
+ "optional": true
+ }
+ }
+ },
"node_modules/tsutils": {
"version": "3.21.0",
"resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
diff --git a/package.json b/package.json
index 3b9692c..671c76b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"@jsonforms/material-renderers": "3.2.0",
"@jsonforms/react": "3.2.0",
"@mui/icons-material": "~5.11.16",
+ "tss-react": "^4.9.6",
"@mui/lab": "^5.0.0-alpha.58",
"@mui/material": "~5.13.0",
"@mui/styles": "^5.2.3",
diff --git a/src/App.tsx b/src/App.tsx
index c92123d..138ab90 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,9 +13,9 @@ import {
} from '@jsonforms/material-renderers';
import RatingControl from './RatingControl';
import ratingControlTester from './ratingControlTester';
-import { makeStyles } from '@mui/styles';
+import { tss } from 'tss-react/mui';
-const useStyles = makeStyles({
+const useStyles = tss.create({
container: {
padding: '1em',
width: '100%',
@@ -56,7 +56,7 @@ const renderers = [
];
const App = () => {
- const classes = useStyles();
+ const { classes } = useStyles();
const [data, setData] = useState<any>(initialData);
const stringifiedData = useMemo(() => JSON.stringify(data, null, 2), [data]);