ReactJS项目中CSS的box-shadow属性不生效，请求排查解决

我正在跟着freeCodeCamp YouTube频道的《React JavaScript Framework - ProjectBased Course》（2022年8月31日发布）教程开发团队成员分配Web应用，遇到一个问题：通过下拉列表选择特定团队后，点击员工卡片本该给该团队所有成员添加黑色box-shadow高亮分组，但样式完全没生效。

我的实现逻辑是：编写handleEmployeeCardClick事件处理函数切换员工的teamName属性，再通过className控制是否添加standout样式（该样式定义了box-shadow）。相关代码如下：

事件处理函数 #

function handleEmployeeCardClick(event) {
    const transformedEmployees = employees.map((employee) => employee.id === parseInt(event.currentTarget.id)
      ?(employee.teamName === selectedTeam)?{...employee, teamName:''}   
      :{...employee, teamName: selectedTeam}:employee);
    setEmployees(transformedEmployees);
  } 

渲染代码 #

<div class="row justify-content-center mt-3 mb-3">
  <div class="col-8">
    <div class="card-collection">
      {
        employees.map((employee) => (
          <div id={employee.id} className={(employee.teamName === selectedTeam ? 'card m-2 standout' : 'card m-2')} style={{ cursor: "pointer" }} onClick={handleEmployeeCardClick}>
            {(employee.gender === 'male')?<img src={maleProfile} className="card-img-top"/>
                                         :<img src={femaleProfile} className="card-img-top"/> }
            <div className="card-body">
              <h5 className="card-title">Full Name: {employee.fullName}</h5>
              <p className="card-text"><b>Designation:</b>{employee.designation}</p>
            </div>
          </div>
        ))
      }
    </div>
  </div>
</div> 

CSS样式 #

.standout{
  box-shadow: rgba(0,0,0,0.16) 0px 1px, 4px, rgb(51, 51, 51) 0px 0px 0px 3px; 
}

排查与解决 #

1. CSS语法错误（核心问题）

你的standout类中box-shadow的写法存在语法错误：rgba(0,0,0,0.16) 0px 1px, 4px里的逗号是多余的，单个阴影的参数（水平偏移、垂直偏移、模糊半径）需要用空格分隔，只有多个独立阴影层之间才用逗号分隔。

修正后的CSS：

.standout {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
}

2. 额外优化点

• 统一JSX属性规范：React中应使用className替代原生HTML的class属性，你渲染代码中外层的div用了class，虽然浏览器能兼容，但建议改为className，符合React开发规范。
• 确认状态同步：检查下拉选择团队后，selectedTeam状态是否正确更新，避免因状态不同步导致样式判断逻辑失效。

修正后，当员工的teamName与selectedTeam匹配时，standout样式会正常生效，卡片会显示预期的黑色阴影高亮效果。

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