@arcblock/ux 3.0.25 → 3.0.27

package/src/Theme/theme-provider.tsx

@@ -33,6 +33,8 @@ export interface ColorSchemeContextType {
   changeMode: (mode: PaletteMode) => void;
   prefer?: Prefer;
 }
+export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
+export type Prefer = 'light' | 'dark' | 'system';
 
 export const ColorSchemeContext = createContext<ColorSchemeContextType>({} as ColorSchemeContextType);
 export function useColorScheme() {
@@ -77,6 +79,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
     const webkitThumb = prefix
       ? `${prefix}::-webkit-scrollbar-thumb, ${prefix} *::-webkit-scrollbar-thumb`
       : '*::-webkit-scrollbar-thumb';
+    const webKitCorner = prefix
+      ? `${prefix}::-webkit-scrollbar-corner, ${prefix} *::-webkit-scrollbar-corner`
+      : '*::-webkit-scrollbar-corner';
     const firefoxSelector = prefix ? `${prefix}, ${prefix} *` : '*';
 
     return (
@@ -102,6 +107,9 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
                 backgroundClip: 'padding-box',
               },
             },
+            [webKitCorner]: {
+              background: trackColor,
+            },
           },
           // Firefox
           '@supports not selector(::-webkit-scrollbar)': {
@@ -118,8 +126,8 @@ function DarkSchemeStyles({ className = undefined }: { className?: string }) {
   return null;
 }
 
-export type UxTheme = ThemeOptions | ((parentTheme: Theme, context?: { mode: PaletteMode }) => Theme);
-export type Prefer = 'light' | 'dark' | 'system';
+let injectedCssBaseline = false;
+const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
 
 interface BaseThemeProviderProps {
   children?: React.ReactNode;
@@ -127,17 +135,16 @@ interface BaseThemeProviderProps {
   injectFirst?: boolean;
   /** 指定一个类名，DarkSchemeStyles 只会作用于带有该类的元素及其后代 */
   darkSchemeClass?: string;
+  /** 禁用样式缓存 */
+  disableStyleCache?: boolean;
 }
-
-let injectedCssBaseline = false;
-const injectedDarkSchemeStylesMap: Record<string, boolean> = {};
-
 /** 快速配置 MUI 主题 */
 function BaseThemeProvider({
   children = null,
   theme = defaultTheme,
   injectFirst = true,
   darkSchemeClass = '',
+  disableStyleCache = false,
 }: BaseThemeProviderProps) {
   const _theme = useMemo(() => {
     if (typeof theme === 'function') {
@@ -151,18 +158,20 @@ function BaseThemeProvider({
   }, [theme]);
 
   const cssBaseline = useCreation(() => {
-    if (injectedCssBaseline) return null;
+    if (disableStyleCache) return <CssBaseline />;
 
+    if (injectedCssBaseline) return null;
     injectedCssBaseline = true;
     return <CssBaseline />;
-  }, []);
+  }, [disableStyleCache]);
 
   const darkSchemeStyles = useCreation(() => {
-    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
+    if (disableStyleCache) return <DarkSchemeStyles className={darkSchemeClass} />;
 
+    if (injectedDarkSchemeStylesMap[darkSchemeClass]) return null;
     injectedDarkSchemeStylesMap[darkSchemeClass] = true;
     return <DarkSchemeStyles className={darkSchemeClass} />;
-  }, [darkSchemeClass]);
+  }, [darkSchemeClass, disableStyleCache]);
 
   return (
     // injectFirst 会影响 makeStyles 自定义样式和 mui styles 覆盖问题
@@ -180,7 +189,6 @@ interface ColorSchemeProviderProps extends BaseThemeProviderProps {
   prefer?: Prefer;
   disableBlockletTheme?: boolean;
 }
-
 /** 配置带颜色模式切换功能的 MUI 主题 */
 function ColorSchemeProvider({
   children = null,
@@ -349,7 +357,6 @@ export interface ThemeProviderProps extends ColorSchemeProviderProps {
    */
   enableColorScheme?: boolean;
 }
-
 export default function ThemeProvider({
   children = null,
   prefer = undefined,