Next.js中styled-components映射子组件时自定义Props异常问题

你的问题出在styled-components的插值函数参数使用错误上：

你在ReviewItemContainer的模板字符串中，将插值函数的参数命名为$isActive，但实际上这个参数接收的是整个props对象，而非单独的$isActive属性。由于对象在布尔判断中始终为真值（truthy），无论子组件实际的$isActive值是true还是false，判断逻辑都会执行background-color: black;，导致所有子组件都显示激活状态。

修复方案 #

有两种正确的写法可以解决这个问题：

方案一：解构props获取$isActive属性

export const ReviewItemContainer = styled.div<{ $isActive: boolean }>`
  ${({ $isActive }) => ($isActive ? 'background-color: black;' : '')}
`;

方案二：通过props对象直接访问$isActive属性

export const ReviewItemContainer = styled.div<{ $isActive: boolean }>`
  ${props => (props.$isActive ? 'background-color: black;' : '')}
`;

修改后，只有第一个子组件（index === 0）会触发$isActive: true的样式逻辑，显示黑色背景，其余子组件则保持默认状态，符合预期。

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