avoid theme context issue

mui · Oct 23, 2022 · 1f8a463 · 1f8a463
1 parent 40a4825
commit 1f8a463
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 38 deletions.
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
-import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
@@ -674,7 +674,7 @@ function AboutContent() {
           </Grid>
         </Box>
       </Container>
-      <MuiThemeProvider theme={brandingDarkTheme}>
+      <ThemeProvider theme={brandingDarkTheme}>
         <Box sx={{ bgcolor: 'primaryDark.700' }}>
           <Container sx={{ py: { xs: 4, sm: 8 } }}>
             <Typography
@@ -722,7 +722,7 @@ function AboutContent() {
             </Box>
           </Container>
         </Box>
-      </MuiThemeProvider>
+      </ThemeProvider>
       <Container sx={{ py: { xs: 4, md: 8 } }}>
         <Typography variant="h2" sx={{ mt: 1, mb: { xs: 2, sm: 4 } }}>
           How can you support us?

diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 
@@ -17,14 +17,8 @@ export default function BrandingProvider(props: BrandingProviderProps) {
   const { children, mode: modeProp } = props;
   const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        ...getDesignTokens(mode),
-        ...getThemedComponents(),
-      }),
-    [mode],
-  );
+  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+
   return (
     <ThemeProvider theme={modeProp ? () => theme : theme}>
       {modeProp ? null : <NextNProgressBar />}

diff --git a/docs/src/components/markdown/MarkdownElement.tsx b/docs/src/components/markdown/MarkdownElement.tsx
@@ -11,7 +11,7 @@ const Root = styled('div')(({ theme }) => ({
   color: theme.palette.text.primary,
   '& pre': {
     backgroundColor: theme.palette.primaryDark[800],
-    direction: theme.direction,
+    direction: 'ltr /*! @noflip */',
     overflow: 'auto',
     margin: 0,
     WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
@@ -25,8 +25,8 @@ const Root = styled('div')(({ theme }) => ({
     // Avoid layout jump after hydration (style injected by prism)
     ...theme.typography.caption,
     fontFamily: theme.typography.fontFamilyCode,
-    WebkitFontSmoothing: 'subpixel-antialiased',
     fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased',
     // Reset for Safari
     // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
     fontSize: '1em',

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -1,4 +1,3 @@
-import { deepmerge } from '@mui/utils';
 import { CSSObject } from '@mui/system';
 import type {} from '@mui/material/themeCssVarsAugmentation';
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
@@ -897,5 +896,12 @@ export function getThemedComponents(): ThemeOptions {
   };
 }
 
-const darkTheme = createTheme(getDesignTokens('dark'));
-export const brandingDarkTheme = deepmerge(darkTheme, getThemedComponents());
+export const brandingDarkTheme = createTheme({
+  ...getDesignTokens('dark'),
+  ...getThemedComponents(),
+});
+
+export const brandingLightTheme = createTheme({
+  ...getDesignTokens('light'),
+  ...getThemedComponents(),
+});
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { alpha, darken, styled } from '@mui/material/styles';
-import { blue, blueDark } from 'docs/src/modules/brandingTheme';
+import { blue, blueDark, brandingLightTheme } from 'docs/src/modules/brandingTheme';
 
 const Root = styled('div')(({ theme }) => ({
   ...theme.typography.body1,
@@ -20,30 +20,30 @@ const Root = styled('div')(({ theme }) => ({
     margin: theme.spacing(2, 'auto'),
     padding: theme.spacing(2),
     backgroundColor: blueDark[800],
-    color: '#fff', // fallback color until Prism's theme is loaded
+    color: theme.palette.text.primary, // fallback color until Prism's theme is loaded
     colorScheme: 'dark',
-    direction: theme.direction,
+    direction: 'ltr /*! @noflip */',
     borderRadius: theme.shape.borderRadius,
     border: '1px solid',
     borderColor: blueDark[700],
     overflow: 'auto',
     WebkitOverflowScrolling: 'touch',
     fontSize: theme.typography.pxToRem(13),
-    maxHeight: '400px',
     maxWidth: 'calc(100vw - 32px)',
+    maxHeight: '400px',
     [theme.breakpoints.up('md')]: {
       maxWidth: 'calc(100vw - 32px - 16px)',
     },
   },
   '& code': {
     display: 'inline-block',
     ...theme.typography.body2,
-    fontFamily: theme.typography.fontFamilyCode,
-    WebkitFontSmoothing: 'subpixel-antialiased',
-    fontWeight: 400,
     // Reset for Safari
     // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102
     fontSize: '1em',
+    fontFamily: brandingLightTheme.typography.fontFamilyCode,
+    fontWeight: 400,
+    WebkitFontSmoothing: 'subpixel-antialiased',
   },
   // inline code block
   '& :not(pre) > code': {
@@ -100,12 +100,7 @@ const Root = styled('div')(({ theme }) => ({
     color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[900],
   },
   '& ul': {
-    ...(theme.direction === 'rtl' && {
-      paddingRight: 30,
-    }),
-    ...(theme.direction !== 'rtl' && {
-      paddingLeft: 30,
-    }),
+    paddingLeft: 30,
   },
   '& h1, & h2, & h3, & h4': {
     '& code': {
@@ -428,13 +423,7 @@ const Root = styled('div')(({ theme }) => ({
     cursor: 'pointer',
     position: 'absolute',
     top: theme.spacing(1),
-    ...(theme.direction === 'ltr'
-      ? {
-          right: theme.spacing(1),
-        }
-      : {
-          left: theme.spacing(1),
-        }),
+    right: `${theme.spacing(1)} /*! @noflip */`,
     fontFamily: 'inherit',
     fontSize: theme.typography.pxToRem(13),
     fontWeight: 500,