diff --git a/packages/core/src/util/createSxComponent.tsx b/packages/core/src/util/createSxComponent.tsx index fa0ac53..35afd19 100644 --- a/packages/core/src/util/createSxComponent.tsx +++ b/packages/core/src/util/createSxComponent.tsx @@ -2,12 +2,16 @@ import type { ComponentType } from 'react'; import React, { forwardRef } from 'react'; import type { SxProps, TextSxProps } from '../@types/SxProps'; +import type { UseSxOptions } from '../hook/useSx'; import { useSx } from '../hook/useSx'; -export function createSxComponent(Base: ComponentType) { +export function createSxComponent( + Base: ComponentType, + { defaultProps, sxOptions }: { defaultProps?: Props & SxProps; sxOptions?: UseSxOptions } = {}, +) { return () => { const Transformed = forwardRef(function (props, ref) { - const { filteredProps, getStyle } = useSx(props); + const { filteredProps, getStyle } = useSx({ ...defaultProps, ...props }, sxOptions); return ; }); @@ -18,10 +22,19 @@ export function createSxComponent(Base: ComponentType }; } -export function createSxTextComponent(Base: ComponentType) { +export function createSxTextComponent( + Base: ComponentType, + { + defaultProps, + sxOptions, + }: { defaultProps?: Props & TextSxProps; sxOptions?: UseSxOptions } = {}, +) { return () => { const Transformed = forwardRef(function (props, ref) { - const { filteredProps, getStyle } = useSx(props, { styleType: 'TextStyle' }); + const { filteredProps, getStyle } = useSx( + { ...defaultProps, ...props }, + { styleType: 'TextStyle', ...sxOptions }, + ); return ; });