Как стилизовать компонент React после импорта

Question

Я провел небольшое исследование, но также Я не нашел правильного ответа

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

Даже делать это с помощью l oop мне не очень хорошо. Так есть ли альтернатива ?

Answer 1

Прежде всего, вы должны указать имя компонента с заглавной буквы:

cardCollection // Rename it to CardCollection

Теперь, к вашему запросу; вы можете предоставить реквизиты для компонента:

<Card className="class-name1" />

А в компоненте Card вы можете предоставить реквизиты:

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

Answer 2

Всегда это можно сделать:

1- передавая встроенный стиль: a: <Card style={{color:"red"}} /> b: внутри карты вы можете использовать это как:

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

2- by имя класса: a: <Card cssClassName="c1" /> b: используйте его для каждого элемента внутри карты, например:

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

обратите внимание, что если Card comp - это компонент, который вы импортируете из библиотеки, вы должны вместо этого прочитать его документ , обычно реализованы оба способа