如何使用 Bootstrap 4 制作可重用的样式化组件

Question

我是 styled-components 的新手，我非常喜欢这个概念。但是，当我尝试重构具有样式组件的组件时，我目前面临一些困难。我有一张 bootstrap 卡片，我在其中编写了一些可重复使用的表单，例如文本输入和按钮。简化的 MyComponent.js 看起来像这样：

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>
    );
  }
};

这工作正常，但是如果我想让 StyledCard 在单独的文件中重复使用（我们称之为 CardForm.js），它不会按预期工作。 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

然后如果 CardForm 在 MyComponent.js 中被导入，就像这样：

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

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

它不起作用意味着 CardForm 中的其他表单元素不会被渲染。我在这里做错了什么？

Answer 1

CardForm试试这个。把 children 放在 article 里面。否则 children 将覆盖 article。

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

如何使用 Bootstrap 4 制作可重用的样式化组件

How to make resuable styled-components using Bootstrap4

javascript

reactjs

bootstrap-4

styled-components