diff --git a/.changeset/clean-wolves-cheat.md b/.changeset/clean-wolves-cheat.md new file mode 100644 index 000000000..c750d8ffa --- /dev/null +++ b/.changeset/clean-wolves-cheat.md @@ -0,0 +1,5 @@ +--- +"@suid/system": patch +--- + +Add support for component style overrides via themes diff --git a/packages/system/src/createStyled.tsx b/packages/system/src/createStyled.tsx index b4e4e47f3..ca53e9be0 100644 --- a/packages/system/src/createStyled.tsx +++ b/packages/system/src/createStyled.tsx @@ -59,16 +59,22 @@ export const skipProps: (keyof ComponentProps)[] = [ "as", ]; -function resolveStyles, P, O>( +function getStyleOverrides(name: N, theme: Theme): any | undefined { + return theme.components?.[name]?.styleOverrides; +} + +function resolveStyles, P, O, N extends string = string>( useTheme: () => T, className: string, styles: Style[], - inProps: ComponentProps + inProps: ComponentProps, + options: StyledOptions = {} ) { return createMemo(() => { const theme = useTheme(); + const styleOverrides = getStyleOverrides(options.name, theme); const ownerState = inProps.ownerState; - return styles.reduce((result, style) => { + const baseStyles = styles.reduce((result, style) => { let styledProps: StyledProps | false | undefined; if (typeof style === "function") { styledProps = style({ @@ -94,6 +100,20 @@ function resolveStyles, P, O>( ); return result; }, [] as StyledProps[]); + let resolvedStyleOverrides: any[] = []; + if ( + options.overridesResolver && + typeof options.overridesResolver === "function" && + styleOverrides + ) { + resolvedStyleOverrides = options + .overridesResolver(inProps, styleOverrides) + .map((styleProp) => + styleProp ? resolveStyledProps(styleProp as StyledProps, {}) : null + ) + .filter(Boolean); + } + return baseStyles.concat(resolvedStyleOverrides); }); } @@ -185,7 +205,8 @@ function createStyled< $useTheme, cssClassName, styles, - inProps + inProps, + options ); const inSx = () => {