@mui/material 5.2.5 → 5.3.0

package/styles/createTheme.d.ts

@@ -9,7 +9,7 @@ import { Components } from './components';
 
 export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   mixins?: MixinsOptions;
-  components?: Components;
+  components?: Components<BaseTheme>;
   palette?: PaletteOptions;
   shadows?: Shadows;
   transitions?: TransitionsOptions;
@@ -18,12 +18,8 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
   unstable_strictMode?: boolean;
 }
 
-/**
- * Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
- */
-export interface Theme extends SystemTheme {
+interface BaseTheme extends SystemTheme {
   mixins: Mixins;
-  components?: Components;
   palette: Palette;
   shadows: Shadows;
   transitions: Transitions;
@@ -32,6 +28,16 @@ export interface Theme extends SystemTheme {
   unstable_strictMode?: boolean;
 }
 
+// shut off automatic exporting for the `BaseTheme` above
+export {};
+
+/**
+ * Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
+ */
+export interface Theme extends BaseTheme {
+  components?: Components<BaseTheme>;
+}
+
 /**
  * @deprecated
  * Use `import { createTheme } from '@mui/material/styles'` instead.

package/styles/overrides.d.ts

@@ -1,4 +1,5 @@
 import { CSSObject, CSSInterpolation } from '@mui/system';
+import { ComponentsPropsList } from './props';
 import { AccordionActionsClassKey } from '../AccordionActions';
 import { AccordionClassKey } from '../Accordion';
 import { AccordionDetailsClassKey } from '../AccordionDetails';
@@ -111,14 +112,25 @@ import { TooltipClassKey } from '../Tooltip';
 import { TouchRippleClassKey } from '../ButtonBase/TouchRipple';
 import { TypographyClassKey } from '../Typography';
 
-export type OverridesStyleRules<ClassKey extends string = string> = Record<
+export type OverridesStyleRules<
+  ClassKey extends string = string,
+  ComponentName = keyof ComponentsPropsList,
+  Theme = unknown,
+> = Record<
   ClassKey,
-  CSSInterpolation
+  | CSSInterpolation
+  | ((
+      // Record<string, unknown> is for other props that the slot receive internally
+      // Documenting all ownerStates could be a huge work, let's wait until we have a real needs from developers.
+      props: (ComponentName extends keyof ComponentsPropsList
+        ? { ownerState: ComponentsPropsList[ComponentName] & Record<string, unknown> }
+        : {}) & { theme: Theme } & Record<string, unknown>,
+    ) => CSSInterpolation)
 >;
 
-export type ComponentsOverrides = {
+export type ComponentsOverrides<Theme = unknown> = {
   [Name in keyof ComponentNameToClassKey]?: Partial<
-    OverridesStyleRules<ComponentNameToClassKey[Name]>
+    OverridesStyleRules<ComponentNameToClassKey[Name], Name, Theme>
   >;
 } & {
   MuiCssBaseline?: CSSObject | string;

package/styles/useThemeProps.d.ts

@@ -1,7 +1,8 @@
+import { Theme } from './createTheme';
 import { Components } from './components';
 
 export interface ThemeWithProps {
-  components?: Components;
+  components?: Components<Omit<Theme, 'components'>>;
 }
 
 export type ThemedProps<Theme, Name extends keyof any> = Theme extends {