如何在React组件中将颜色作为prop传递并控制激活态样式？

问题原因 #

你当前的代码硬编码了className为styles.gray，而且把props全量展开在div属性最前面，即使外部传入类名也会被内部的固定类覆盖，同时没有预留控制激活状态的入参。

解决方案 #

第一步：改造Card组件 #

新增isActive控制激活状态，同时支持传入自定义未激活样式类、合并外部传入的类名：

// 前提：你的样式文件中已定义styles.active（白色样式）、默认未激活类styles.gray（黑色样式）
export function Card({ 
  isActive, 
  inactiveClass = styles.gray, 
  className, 
  children,
  ...restProps 
}) {
  // 合并类名，避免空格冗余
  const combinedClass = [
    isActive ? styles.active : inactiveClass,
    className
  ].filter(Boolean).join(' ')

  return <div className={combinedClass} {...restProps}>{children}</div>
}

第二步：三元调用示例 #

父组件中直接通过三元表达式判断isActive的传入值即可：

import { useState } from 'react'
import { Card } from './Card'

function Parent() {
  const [activeId, setActiveId] = useState(1)

  return (
    <div>
      {/* 三元判断激活状态，符合你的使用需求 */}
      <Card isActive={activeId === 1} onClick={() => setActiveId(1)}>
        卡片1
      </Card>
      <Card isActive={activeId === 2} onClick={() => setActiveId(2)}>
        卡片2
      </Card>
      
      {/* 如果要自定义黑色类，直接传入inactiveClass即可 */}
      <Card isActive={false} inactiveClass={styles.myCustomBlack}>
        自定义黑色的未激活卡片
      </Card>
    </div>
  )
}

核心说明 #

• 解构props时单独处理状态控制、类名相关参数，避免属性覆盖冲突
• 默认未激活类为你原有的styles.gray，也支持通过inactiveClass prop自定义传入你需要的黑色对应样式类，满足你的需求
• 布尔类型的isActive参数天然适配三元表达式的判断场景

内容的提问来源于stack exchange，提问作者Joe