Question

我是样式组件的新手，我真的很喜欢这个概念。但是，当我尝试使用样式化的组件重构Component时，我目前面临一些困难。我有一个引导卡，其中编写了一些可重用的形式，例如文本输入和按钮。简化的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中是importet，就像这样：

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

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

它不起作用，表示CardForm中的其他Form元素未呈现。我在这里做什么错了？

Answer 1

尝试CardForm。将孩子放在article内。否则子级将覆盖article。

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

如何使用Bootstrap4制作可恢复样式的组件

1 个答案: