Skip to main content

​
Signature

// With context
function styledConfig<T, U>(
  components: [T, U],
  config: {
    context: StyledContext,
    base?: Props<T> & Props<U>,
    variants?: { [name: string]: { [value: string]: Props<T> & Props<U> } },
    defaultVariants?: { [name: string]: string | boolean },
    compoundVariants?: CompoundVariant[],
  }
): typeof config

// Without context
function styledConfig<T, U>(
  components: [T, U],
  config: {
    base?: Props<T> & Props<U>,
    variants?: { [name: string]: { [value: string]: Props<T> & Props<U> } },
    defaultVariants?: { [name: string]: string | boolean },
    compoundVariants?: CompoundVariant[],
  }
): typeof config

​
Parameters

​
components
[ElementType, ElementType]
required
A tuple of two components that will share this config. Used only for type inference — not stored or used at runtime.
styledConfig([UniwindImage, UniwindImageBg], { ... })
​
config
object
required
Configuration object. Identical structure to styled() config — see styled() Config Properties for details.The config is validated against both components. If a variant value sets a prop that doesn’t exist on one of the components, TypeScript will error.

​
Returns

The exact same config object (identity function). Zero runtime overhead — exists purely for type inference.

​
Example

const config = styledConfig([UniwindImage, UniwindImageBg], {
  context: ImageCtx,
  base: { className: "rounded-lg" },
  variants: {
    variant: {
      solid: { className: "bg-black" },
      bordered: { className: "border-2" },
    },
  },
});

const StyledImage = styled(UniwindImage, config);
const StyledImageBg = styled(UniwindImageBg, config);

​
Type Safety

The config is validated against both components simultaneously. If a variant sets a prop that only exists on one component, TypeScript will catch it: 
// ❌ TypeScript error — "onLoad" exists on Image but not on Text
const config = styledConfig([Image, Text], {
  variants: {
    variant: {
      solid: { onLoad: () => {} },
    },
  },
});

​
See Also