Example 1:

export const MyContent = styled.div`
  background-color: red;
`;

export const MyContentHeader = styled.div`
  padding: 20px;
`;

export const MyContentFooter = styled.div`
  margin-bottom: 20px;
`;

(in use)

<MyContent>
    <MyContentHeader>Text goes here</MyContentHeader>
    <MyContentButtons>
        <Button>Button1</Button>
        <Button>Button2</Button>
    </MyContentButtons>
</MyContent>

-------


class MyContent extends React.Component {
  constructor(props) {
    this.state = { name: "test" };
  }
  render() {
    return (
      <div>
        {this.props.header(this.state)}
        {this.props.footer(this.state)}
      </div>
    );
  }
}


<MyContent
  header={(data) => <Header>{data.name}</Header>}
  footer={(props) => (
      <Button>Button1</Button>
      <Button>Button2</Button>
  )}
/>