Fix types of theme prop

mui · Jan 18, 2024 · 53adeaa · 53adeaa
1 parent c88ec5f
commit 53adeaa
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 24 deletions.
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
@@ -1,3 +1,10 @@
+import { MUICssWithTheme } from '@mui/system';
+import { Theme } from './createTheme';
+
+declare const css: MUICssWithTheme<Theme>;
+
+export { css };
+
 export { default as THEME_ID } from './identifier';
 export {
   default as createTheme,
@@ -47,7 +54,6 @@ export {
   Interpolation,
   CSSInterpolation,
   CSSObject,
-  css,
   keyframes,
   // color manipulators
   hexToRgb,

diff --git a/packages/mui-styled-engine-sc/src/index.d.ts b/packages/mui-styled-engine-sc/src/index.d.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import * as CSS from 'csstype';
 import * as hoistNonReactStatics from 'hoist-non-react-statics';
-import { DefaultTheme } from 'styled-components';
 
 type WithOptionalTheme<P extends { theme?: T | undefined }, T> = OmitU<P, 'theme'> & {
   theme?: T | undefined;
@@ -273,26 +272,6 @@ export interface ThemedStyledFunctionBase<
   ): StyledComponent<C, T, O & U, A>;
 }
 
-type RuleSet<Props> = Interpolation<Props>[];
-
-declare function css(
-  styles:
-    | TemplateStringsArray
-    | CSSObject
-    | InterpolationFunction<ThemedStyledProps<object, DefaultTheme>>,
-  ...interpolations: Interpolation<ThemedStyledProps<object, DefaultTheme>>[]
-): RuleSet<object>;
-
-declare function css<Props extends object>(
-  styles:
-    | TemplateStringsArray
-    | CSSObject
-    | InterpolationFunction<ThemedStyledProps<Props, DefaultTheme>>,
-  ...interpolations: Interpolation<ThemedStyledProps<Props, DefaultTheme>>[]
-): RuleSet<Props>;
-
-export { css };
-
 // same as ThemedStyledFunction in styled-components, but without attrs, and withConfig
 export interface ThemedStyledFunction<
   C extends keyof JSX.IntrinsicElements | React.ComponentType<any>,
@@ -418,3 +397,23 @@ export interface MUIStyledComponent<
     tag: Tag,
   ): MUIStyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>;
 }
+
+type RuleSet<Props> = Interpolation<Props>[];
+
+export type MUICssWithTheme<Theme extends object = {}> = {
+  (
+    styles:
+      | TemplateStringsArray
+      | CSSObject
+      | InterpolationFunction<ThemedStyledProps<object, Theme>>,
+    ...interpolations: Interpolation<ThemedStyledProps<object, Theme>>[]
+  ): RuleSet<object>;
+
+  <Props extends object>(
+    styles:
+      | TemplateStringsArray
+      | CSSObject
+      | InterpolationFunction<ThemedStyledProps<Props, Theme>>,
+    ...interpolations: Interpolation<ThemedStyledProps<Props, Theme>>[]
+  ): RuleSet<Props>;
+};
diff --git a/packages/mui-styled-engine/src/index.d.ts b/packages/mui-styled-engine/src/index.d.ts
@@ -1,6 +1,6 @@
 import * as CSS from 'csstype';
 import { StyledComponent, StyledOptions } from '@emotion/styled';
-import { PropsOf } from '@emotion/react';
+import { css, PropsOf } from '@emotion/react';
 
 export * from '@emotion/styled';
 export { default } from '@emotion/styled';
@@ -214,3 +214,6 @@ export interface CreateMUIStyled<
     options?: StyledOptions<MUIStyledCommonProps> & MuiStyledOptions,
   ): CreateStyledComponent<MUIStyledCommonProps, JSX.IntrinsicElements[Tag], {}, Theme>;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export type MUICssWithTheme<Theme extends object = {}> = typeof css;
diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts
@@ -1,3 +1,5 @@
+import { MUICssWithTheme as MUICssWithThemeStyledEngine } from '@mui/styled-engine';
+import { Theme as DefaultTheme } from './createTheme';
 import {
   ComposedStyleFunction,
   StyleFunction,
@@ -96,7 +98,6 @@ export type ResponsiveStyleValue<T> = T | Array<T | null> | { [key: string]: T |
 export { DefaultTheme } from '@mui/private-theming';
 
 export {
-  css,
   keyframes,
   StyledEngineProvider,
   Interpolation,
@@ -106,6 +107,13 @@ export {
 export { default as GlobalStyles } from './GlobalStyles';
 export type { GlobalStylesProps } from './GlobalStyles';
 
+export type MUICssWithTheme<Theme extends object = DefaultTheme> =
+  MUICssWithThemeStyledEngine<Theme>;
+
+declare const css: MUICssWithTheme;
+
+export { css };
+
 export * from './style';
 export * from './spacing';