How to pass styled component as props to another element

[salimabsi]

I have component that copies the text passed to it - <CopyText />

When I invoke it, how to pass a styled component to it, or is there another way of doing it?

[auchynnikau]

@salimabsi You can try some of this ways:

const Parent = () => {
  return (
    <Child childComp={<YourCompToPass />} />
  )
};

const Child = (props) => { 
  return (
    <>
     {props.childComp}  
    </>
  )
}

Or using props.children property:

const Parent = () => {
  return (
    <Child>
      <YourCompToPass />
    </Child
  )
};

const Child = (props) => { 
  return (
    <>
     {props.children}  
    </>
  )
}

[quantizor]

Styled components are regular React components, so you can pass them as props like any other component:

<CopyText TextComponent={MyStyledText} />

Then render it inside CopyText:

const CopyText = ({ TextComponent, children }) => (
  <TextComponent>{children}</TextComponent>
);

This is standard React composition and is not specific to styled-components.