导入后如何设置 React 组件的样式答案

【问题标题】：How to style React component after importing导入后如何设置 React 组件的样式
【发布时间】：2020-07-30 03:53:26
【问题描述】：

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

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

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

export default CardCollection;

我如何设计**那些卡片组件？

我试过了：

     <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" />

即使通过使用循环来执行此操作对我来说也不好看。那么有没有替代方案？

【问题讨论】：

有多种方式来设置 React 组件的样式。 className，inline-style-prop，其他一些主题库/模块。由您决定使用哪个。但是，在您的示例中，您正在设置包含 div 的样式，而不是 Card。
您可以将 className 传递给 Card 组件，并且在 Card 组件中您也需要注入这个 className。所以组件使用看起来像：<Card className="" />
允许 Card 组件接受自定义类名作为 prop 并在父级渲染时将其传递给它
让我们假设我需要使用 3 张卡：可能看起来不错，但我需要多次这样做。那么有什么替代方法吗？

标签： javascript css reactjs sass

【解决方案1】：

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

cardCollection // Rename it to CardCollection

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

<Card className="class-name1" />

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

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

【讨论】：

我这样做了，但是这样做的时候它看起来像一个使用 className 的样式组件，而不是像元素一样的组件。在我的情况下，我需要渲染 18 个卡片组件，并且写类似 ''' ''' 18 次是一个坏主意。所以我在寻找替代方案:)

【解决方案2】：

方法：

1- 通过传递内联样式：答：<Card style={{color:"red"}} /> b：在卡片组合里面你可以像这样使用它：

<div style={this.props.style}>

2- 按类名：答：<Card cssClassName="c1" /> b：在卡片内的每个元素上使用它，例如：

<div className={this.props.cssClasName}>

请注意，如果 Card comp 是您从库中导入的组件，则应改为阅读它的文档，通常它们以两种方式实现

【讨论】：