时间戳

首页 > 解决方案 > 导入后如何设置 React 组件的样式

javascript - 导入后如何设置 React 组件的样式

问题描述

我做了一些研究，但也没有找到正确的答案

import Card from "./components/Card/card";

class CardCollection extends Component {
  render() {
    return (
      <div>
        <Card />
        <Card />
        <Card />
      </div>
    );
  }
}

export default CardCollection;

我如何设计**那些Card 组件？

我试过了：

     <div className="class-name1"> <Card /> </div>
     <div className="class-name2"> <Card /> </div>
     <div className="class-name3"> <Card /> </div>

但我认为这不是这样做的好方法。这也不是

<Card propName="margin-tb-20" />
<Card propName="margin-tb-20" />
<Card propName="margin-tb-20" />
<Card propName="margin-tb-20" />
<Card propName="margin-tb-20" />

即使通过使用循环来做到这一点对我来说也不好看。那么还有其他选择吗？

标签： javascriptcssreactjssass

解决方案

首先，您必须提供大写的组件名称：

cardCollection // Rename it to CardCollection

现在，您的查询；您可以为组件提供道具：

<Card className="class-name1" />

在 Card 组件中，您可以提供以下道具：

{/* card */}
<div {...props}>

推荐阅读