要实现这一点，您必须为每张卡指定自己的状态; selected。这样，每张卡都将具有它们自己的微小逻辑，通过该逻辑它们将知道它们是否被选中。

// TemplateCard.js
...

const TemplateCard = ({
    title,
    description,
    img,
    classNameToAdd,
    classNameOnSelected,
    /* selected,  we will make this a state instead of prop */
}: Props) => {
    const { aspectRatio, vmin } = useWindowResponsiveValues();

    const [selected, setSelected] = useState(false); // Added state

    // Added handler
    const handleClick = () => {
      setSelected(!selected);
    };

    if (selected) {
        className += `${styles.card} ${classNameToAdd} ${classNameOnSelected}`;
    }

    return (
        <div style={card} className={className} onClick={handleClick}>
            <img style={imageSize} src={img}></img>
            <div style={cardTitle}>{title}</div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};
...

在TemplateCard组件上添加一个onClick处理程序，并在主div上触发它。此外，您还需要为您的单个卡片提供一些标识，以便我们可以使用其来源数组的索引。
就像这样：

const TemplateCard = ({
    title,
    description,
    img,
    classNameToAdd,
    classNameOnSelected,
    selected,
    handleClick
    index
}: Props) => {
    const { aspectRatio, vmin } = useWindowResponsiveValues();
    let className = `${styles.card} ${classNameToAdd}`;

    if (selected) {
        className += `${styles.card} ${classNameToAdd} ${classNameOnSelected}`;
    }

    return (
        <div style={card} className={className} onClick={()=>handleClick(index)}>
            <img style={imageSize} src={img}></img>
            <div style={cardTitle}>{title}</div>
            <div style={descriptionCard}>{description}</div>
        </div>
    );
};

在TemplateList组件中，您需要设置一个索引数组（使用useState），该数组存储已单击的TemplateCards的索引，以便您可以检查哪些卡已被选中，哪些卡未被选中。
就像这样：

const [selectedArray,setSelectedArray]=useState([])

const handleClick=(i)=>{
const tempArray =[...selectedArray]
if(tempArray[i]==i){tempArray[i]=undefined}
else {tempArray[i]=i}

setSelectedArray(tempArray)
}

组件将如下所示：

const TemplateList = ({ templates }: Props) => {
    return (
        <div className={styles.scrollContainer}>
            {templates.map((item,index) => (
                <TemplateCard
                    title={item.title}
                    description={item.description}
                    img={item.imgURL}
                    classNameToAdd={styles.cardContainer}
                    index={index}
                    selected={selectedArray[index]==index? true:false}
                    handleClick={handleClick}
                />
            ))}
        </div>
    );
};

现在，我们使用索引作为标识符，并在此基础上设置一个所选卡片的数组。在此基础上，我们将“selected”属性发送到Card组件。在那里，您可以根据该属性应用样式。
希望您的问题得到了解答！！