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