customisableStyledComponents.js

const customisableStyledComponents = (componentFactory, defaultStyledCmpts) =>
  (overrideStyledCmpts = {}) => {
    const customisedCmpts = Object.entries(overrideStyledCmpts)
      .map(([componentName, customiseCmptFn]) =>
        [componentName, customiseCmptFn(defaultStyledCmpts[componentName])])
      .reduce((acc, [k, v]) =>
        ({ ...acc, [k]: v }), {});
    const mergedComponents = { ...defaultStyledCmpts, ...customisedCmpts };

    return componentFactory(mergedComponents);
  };

export default injectableStyles;

sampleUsage.js

import customisableStyledComponents from './customisableStyledComponents.js'

const defaultStyledComponents = {
  Wrapper: styled.div`background: red;`,
  Button: styled.div`background: yellow;`,
}

const myComponentFactory = ({ Wrapper, Button }) => {
  const MyComponent = () => (
    <Wrapper>
      <Button />
    </Wrapper>
  )
  
  return MyComponent
}

const CustomisableFactory = customisableStyledComponents(myComponentFactory, defaultStyledComponents)

const DefaultMyComponent = CustomisableFactory()
const CustomMyComponent = CustomisableFactory({
  Wrapper: x => x.extend`
    background: blue;
  `,
  Button: () => AnotherComponentAltogether,
})