How to make resuable styled-components using Bootstrap4

Question

I am new to styled-components and I really like the concept. However I face currently some difficulties when I try to refactor a Component with styled components. I have a bootstrap Card in which I compose some reusable Forms such as Text Inputs and Buttons. Simplified MyComponent.js looks like this:

const StyledCard = styled.div`
  background: #008080;
  color:  white;
  border-radius: 5px;
  border: solid #008080;
`;

  render() {
    return(
<StyledCard classname = "card">
<article className="card-body">
      <ButtonForm
              name=''
              label=''
            />
          <form>
          <TextInput
                name=""
                label=""
              />
          </form>
          </article>
</StyledCard>
    );
  }
};

This is working fine, however if I want to make the StyledCard reusable in a separate file (let´s call it CardForm.js) it doesn´t work as expected. CardForm.js:

const StyledCard = styled.div`
  background: #008080;
  color:  white;
  border-radius: 5px;
  border: solid #008080;

`;

const CardForm = () => {
    return (
            <StyledCard className="card">
            <article className="card-body">
            </article>
            </StyledCard>
    );
};

export default CardForm

And then if CardForm is importet in MyComponent.js like so:

import CardForm from '../Templates/Card';

    render() {
    return(
<CardForm>
      <ButtonForm
              name=''
              label=''
            />
          <form>
          <TextInput
                name=""
                label=""
              />
          </form>
</CardForm>
    );
  }
};

It doesn´t Work meaning the other Form elements inside CardForm do not get rendered. What am i doing wrong here?

Answer 1

Try this for CardForm. Put children inside the article. Otherwise children will override article.

const CardForm  = ({children}) => (
   <StyledCard className="card">
     <article className="card-body">
        {children}
     </article>
   </StyledCard>
)