fix wrong transformation

Author: siriwatknp

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

@@ -20,7 +20,7 @@ const Container = createContainer({
       ];
     },
   }),
-  useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
+  useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiContainer' }),
 });
 
 Container.propTypes /* remove-proptypes */ = {

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

@@ -6,7 +6,8 @@ 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, useDefaultProps } from '../styles';
+import { styled, Theme } from '../styles';
+import { useDefaultProps } from '../DefaultPropsProvider';
 
 export interface PopperProps extends Omit<BasePopperProps, 'direction'> {
   /**

packages/mui-material/src/Select/SelectInput.js

@@ -516,7 +516,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         {/* So the vertical align positioning algorithm kicks in. */}
         {isEmpty(display) ? (
           // notranslate needed while Google Translate will not fix zero-width space issue
-          <span className="notranslate">​</span>
+          <span className="notranslate">&#8203;</span>
         ) : (
           display
         )}

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

@@ -10,7 +10,7 @@ const Stack = createStack({
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root,
   }),
-  useDefaultProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiStack' }),
+  useThemeProps: (inProps) => useDefaultProps({ props: inProps, name: 'MuiStack' }),
 });
 
 Stack.propTypes /* remove-proptypes */ = {

packages/mui-material/src/Unstable_Grid2/Grid2.tsx

@@ -2,7 +2,8 @@
 import PropTypes from 'prop-types';
 import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
 import { OverridableComponent } from '@mui/types';
-import { styled, useDefaultProps } from '../styles';
+import { styled } from '../styles';
+import { useDefaultProps } from '../DefaultPropsProvider';
 import { Grid2TypeMap } from './Grid2Props';
 
 const Grid2 = createGrid2({

packages/mui-material/src/styles/index.d.ts

@@ -70,7 +70,7 @@ export {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function experimental_sx(): any;
 export { default as useTheme } from './useTheme';
-export { default as useDefaultProps } from './useThemeProps';
+export { default as useThemeProps } from './useThemeProps';
 export * from './useThemeProps';
 export { default as styled } from './styled';
 /**

packages/mui-material/src/styles/shouldSkipGeneratingVar.ts

@@ -1,8 +1,7 @@
 export default function shouldSkipGeneratingVar(keys: string[]) {
   return (
-    // ends with sxConfig
     !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) ||
-    !!keys[0].match(/sxConfig$/) ||
+    !!keys[0].match(/sxConfig$/) || // ends with sxConfig
     (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/))
   );
 }

packages/mui-material/src/styles/useThemeProps.d.ts

@@ -11,7 +11,7 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   ? Props
   : {};
 
-export default function useDefaultProps<
+export default function useThemeProps<
   Theme extends ThemeWithProps,
   Props,
   Name extends keyof any,

packages/mui-material/src/styles/useThemeProps.js

@@ -3,6 +3,6 @@ import systemUseThemeProps from '@mui/system/useThemeProps';
 import defaultTheme from './defaultTheme';
 import THEME_ID from './identifier';
 
-export default function useDefaultProps({ props, name }) {
+export default function useThemeProps({ props, name }) {
   return systemUseThemeProps({ props, name, defaultTheme, themeId: THEME_ID });
 }

packages/mui-material/src/styles/useThemeProps.spec.ts

@@ -1,8 +1,8 @@
-import { Theme, useDefaultProps } from '@mui/material/styles';
+import { Theme, useThemeProps } from '@mui/material/styles';
 import { SliderProps } from '@mui/material/Slider';
 
 function ThemedComponent() {
-  const props = useDefaultProps<Theme, SliderProps, 'MuiSlider'>({
+  const props = useThemeProps<Theme, SliderProps, 'MuiSlider'>({
     props: { color: 'primary' },
     name: 'MuiSlider',
   });