diff --git a/src/mantine-styles/src/theme/MantineProvider.tsx b/src/mantine-styles/src/theme/MantineProvider.tsx index c737f10d664..900a08a45b1 100644 --- a/src/mantine-styles/src/theme/MantineProvider.tsx +++ b/src/mantine-styles/src/theme/MantineProvider.tsx @@ -5,6 +5,7 @@ import { DEFAULT_THEME } from './default-theme'; import type { MantineThemeOverride, MantineTheme } from './types'; import type { CSSObject } from '../tss'; import { mergeThemeWithFunctions } from './utils/merge-theme/merge-theme'; +import { filterProps } from './utils/filter-props/filter-props'; import { NormalizeCSS } from './NormalizeCSS'; type ProviderStyles = Record< @@ -47,7 +48,7 @@ export function useMantineDefaultProps>( props: T ): T { const contextProps = useContext(MantineProviderContext)?.defaultProps?.[component] || {}; - return { ...defaultProps, ...contextProps, ...props }; + return { ...defaultProps, ...contextProps, ...filterProps(props) }; } function GlobalStyles() { diff --git a/src/mantine-styles/src/theme/utils/filter-props/filter-props.test.ts b/src/mantine-styles/src/theme/utils/filter-props/filter-props.test.ts new file mode 100644 index 00000000000..f8ba267c8ca --- /dev/null +++ b/src/mantine-styles/src/theme/utils/filter-props/filter-props.test.ts @@ -0,0 +1,22 @@ +import { filterProps } from './filter-props'; + +describe('@mantine/styles filterProps', () => { + it('filters out props with undefined value', () => { + expect( + filterProps({ + a: undefined, + b: null, + c: 0, + d: '', + e: {}, + f: [], + }) + ).toStrictEqual({ + b: null, + c: 0, + d: '', + e: {}, + f: [], + }); + }); +}); diff --git a/src/mantine-styles/src/theme/utils/filter-props/filter-props.ts b/src/mantine-styles/src/theme/utils/filter-props/filter-props.ts new file mode 100644 index 00000000000..8432f5836dc --- /dev/null +++ b/src/mantine-styles/src/theme/utils/filter-props/filter-props.ts @@ -0,0 +1,8 @@ +export function filterProps>(props: T) { + return Object.keys(props).reduce((acc, key: keyof T) => { + if (props[key] !== undefined) { + acc[key] = props[key]; + } + return acc; + }, {} as T); +}