From 65f7df199fafbcb5af1e0b567f038250c5079daf Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Wed, 8 May 2024 08:40:09 -0400
Subject: [PATCH 1/2] making it so that mui material and mui joy are symbiotic
---
src/index.js | 58 ++++++++++++++++++++++++++++++++++++++++++----------
1 file changed, 47 insertions(+), 11 deletions(-)
diff --git a/src/index.js b/src/index.js
index 42df9d84..7627cec0 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,26 @@
+// import React from 'react';
+// import { CssVarsProvider } from '@mui/joy/styles';
+// import { createRoot } from 'react-dom/client';
+// import { App } from './app';
+// import { LayersProvider, SettingsProvider } from '@context';
+// import './index.css';
+// import '@fontsource/inter';
+// import theme from './theme';
+//
+// const container = document.getElementById('root');
+// const root = createRoot(container);
+//
+// const ProvisionedApp = () => (
+//
+//
+//
+//
+//
+//
+//
+// );
+
import React from 'react';
-import { CssVarsProvider } from '@mui/joy/styles';
import { createRoot } from 'react-dom/client';
import { App } from './app';
import { LayersProvider, SettingsProvider } from '@context';
@@ -7,17 +28,32 @@ import './index.css';
import '@fontsource/inter';
import theme from './theme';
+import {
+ experimental_extendTheme as materialExtendTheme,
+ Experimental_CssVarsProvider as MaterialCssVarsProvider
+ ,THEME_ID as MATERIAL_THEME_ID,
+} from '@mui/material/styles';
+import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
const container = document.getElementById('root');
const root = createRoot(container);
-const ProvisionedApp = () => (
-
-
-
-
-
-
-
-);
+const materialTheme = materialExtendTheme();
+
+const ProvisionedApp = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
-root.render();
+root.render();
\ No newline at end of file
From 94ecc70d43c0b206666a91720b692b6650938e2f Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Wed, 8 May 2024 08:55:59 -0400
Subject: [PATCH 2/2] making it so that mui material and mui joy are symbiotic
---
src/index.js | 45 +++++++++++++++------------------------------
1 file changed, 15 insertions(+), 30 deletions(-)
diff --git a/src/index.js b/src/index.js
index 7627cec0..488c9698 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,46 +1,30 @@
-// import React from 'react';
-// import { CssVarsProvider } from '@mui/joy/styles';
-// import { createRoot } from 'react-dom/client';
-// import { App } from './app';
-// import { LayersProvider, SettingsProvider } from '@context';
-// import './index.css';
-// import '@fontsource/inter';
-// import theme from './theme';
-//
-// const container = document.getElementById('root');
-// const root = createRoot(container);
-//
-// const ProvisionedApp = () => (
-//
-//
-//
-//
-//
-//
-//
-// );
-
import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './app';
import { LayersProvider, SettingsProvider } from '@context';
-import './index.css';
-import '@fontsource/inter';
-import theme from './theme';
+import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/material/CssBaseline';
import {
- experimental_extendTheme as materialExtendTheme,
- Experimental_CssVarsProvider as MaterialCssVarsProvider
- ,THEME_ID as MATERIAL_THEME_ID,
+ experimental_extendTheme as materialExtendTheme,
+ Experimental_CssVarsProvider as MaterialCssVarsProvider,
+ THEME_ID as MATERIAL_THEME_ID
} from '@mui/material/styles';
-import { CssVarsProvider as JoyCssVarsProvider } from '@mui/joy/styles';
-import CssBaseline from '@mui/material/CssBaseline';
+import './index.css';
+import '@fontsource/inter';
+import theme from './theme';
+
+// get a reference to the root element used as a rendering target
const container = document.getElementById('root');
+
+// create the root container
const root = createRoot(container);
+// create a new material theme. this is so it can be differentiated from the joy theme
const materialTheme = materialExtendTheme();
+// render the app specifying the material and joy providers
const ProvisionedApp = () => {
return (
@@ -56,4 +40,5 @@ const ProvisionedApp = () => {
);
};
+// render the app
root.render();
\ No newline at end of file