[material-ui] Support Pigment CSS for CssBaseline, ScopedCssBaseline and Popper

packages/mui-material/src/CssBaseline/CssBaseline.js

@@ -1,8 +1,12 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import useThemeProps from '../styles/useThemeProps';
-import GlobalStyles from '../GlobalStyles';
+import { createUseThemeProps, globalCss } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiCssBaseline');
+
+// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better.
+const SELECTOR = 'mui-ecs';
 
 export const html = (theme, enableColorScheme) => ({
   WebkitFontSmoothing: 'antialiased', // Antialiasing.
@@ -13,7 +17,8 @@ export const html = (theme, enableColorScheme) => ({
   // Fix font resize problem in iOS
   WebkitTextSizeAdjust: '100%',
   // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications.
-  ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }),
+  ...(enableColorScheme &&
+    !theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }),
 });
 
 export const body = (theme) => ({
@@ -26,17 +31,19 @@ export const body = (theme) => ({
   },
 });
 
-export const styles = (theme, enableColorScheme = false) => {
+export const styles = (theme) => {
   const colorSchemeStyles = {};
-  if (enableColorScheme && theme.colorSchemes) {
+  if (theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
       colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
-        colorScheme: scheme.palette?.mode,
+        [`&:has(.${SELECTOR})`]: {
+          colorScheme: scheme.palette?.mode,
+        },
       };
     });
   }
   let defaultStyles = {
-    html: html(theme, enableColorScheme),
+    html: html(theme, true),
     '*, *::before, *::after': {
       boxSizing: 'inherit',
     },
@@ -63,6 +70,8 @@ export const styles = (theme, enableColorScheme = false) => {
   return defaultStyles;
 };
 
+const GlobalStyles = globalCss(({ theme }) => styles(theme));
+
 /**
  * Kickstart an elegant, consistent, and simple baseline to build upon.
  */
@@ -71,7 +80,8 @@ function CssBaseline(inProps) {
   const { children, enableColorScheme = false } = props;
   return (
     <React.Fragment>
-      <GlobalStyles styles={(theme) => styles(theme, enableColorScheme)} />
+      <GlobalStyles />
+      {enableColorScheme && <span className={SELECTOR} style={{ display: 'none' }} />}
       {children}
     </React.Fragment>
   );

packages/mui-material/src/Popper/Popper.tsx

@@ -1,12 +1,15 @@
 'use client';
 import { Popper as BasePopper, PopperProps as BasePopperProps } from '@mui/base/Popper';
-import { Direction, SxProps } from '@mui/system';
-import useTheme from '@mui/system/useThemeWithoutDefault';
+import { SxProps } from '@mui/system';
+import { useRtl } from '@mui/system/RtlProvider';
 import refType from '@mui/utils/refType';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { styled, Theme, useThemeProps } from '../styles';
+import { Theme } from '../styles';
+import { styled, createUseThemeProps } from '../zero-styled';
+
+const useThemeProps = createUseThemeProps('MuiPopper');
 
 export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
   /**
@@ -59,7 +62,7 @@ const Popper = React.forwardRef(function Popper(
   inProps: PopperProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const theme = useTheme<{ direction?: Direction }>();
+  const isRtl = useRtl();
   const props = useThemeProps({
     props: inProps,
     name: 'MuiPopper',
@@ -101,7 +104,7 @@ const Popper = React.forwardRef(function Popper(
   return (
     <PopperRoot
       as={component}
-      direction={theme?.direction}
+      direction={isRtl ? 'rtl' : 'ltr'}
       slots={{ root: RootComponent }}
       slotProps={slotProps ?? componentsProps}
       {...otherProps}

packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { html, body } from '../CssBaseline/CssBaseline';
 import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses';
 
+const useThemeProps = createUseThemeProps('MuiScopedCssBaseline');
+
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
@@ -22,25 +23,30 @@ const ScopedCssBaselineRoot = styled('div', {
   name: 'MuiScopedCssBaseline',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ theme, ownerState }) => {
+})(({ theme }) => {
   const colorSchemeStyles = {};
-  if (ownerState.enableColorScheme && theme.colorSchemes) {
+  if (theme.colorSchemes) {
     Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
       colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = {
         colorScheme: scheme.palette?.mode,
       };
     });
   }
   return {
-    ...html(theme, ownerState.enableColorScheme),
+    ...html(theme, false),
     ...body(theme),
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit',
     },
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold,
     },
-    ...colorSchemeStyles,
+    variants: [
+      {
+        props: { enableColorScheme: true },
+        style: theme.vars ? colorSchemeStyles : { colorScheme: theme.palette.mode },
+      },
+    ],
   };
 });
 

packages/mui-material/src/zero-styled/index.tsx

@@ -2,15 +2,18 @@ import * as React from 'react';
 import { extendSxProp } from '@mui/system/styleFunctionSx';
 import useThemeProps from '../styles/useThemeProps';
 import useTheme from '../styles/useTheme';
-import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles';
+import GlobalStyles from '../GlobalStyles';
 
 export { css, keyframes } from '@mui/system';
 
 export { default as styled } from '../styles/styled';
 
-export function globalCss(styles: GlobalStylesProps['styles']) {
+export function globalCss(styles: any) {
   return function GlobalStylesWrapper() {
-    return <GlobalStyles styles={styles} />;
+    return (
+      // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
+      <GlobalStyles styles={typeof styles === 'function' ? (theme) => styles({ theme }) : styles} />
+    );
   };
 }