React中如何为styled-components组件实现active类样式切换？

• 存在传参逻辑错位：styled-components处理样式插值时，会将组件接收到的完整props对象作为参数传入对应函数，但你定义的getButtonStyles直接将第一个形参作为active值使用，实际拿到的是整个props对象，判断逻辑完全不符合预期。
• 存在变量声明顺序问题：你将hamburgerActiveStyles的定义放在了getButtonStyles的后面，由于const声明存在暂时性死区，函数执行时无法正常读取到激活样式的值，进一步导致样式生成异常。

• 方案1：修正原有函数的传参逻辑，调整变量声明顺序

// 先完成所有样式变量的声明，避免顺序问题
const buttonStyles = css`
  border: 1px solid red;
`;

const hamburgerActiveStyles = css`
  border: 10px solid green;
`;

// 从传入的props对象中解构出active字段做判断
const getButtonStyles = ({ active }) => {
  return active ? hamburgerActiveStyles : buttonStyles;
};

export const HamburgerButtonContainer = styled.button`
  ${getButtonStyles}
`;

• 方案2：采用更贴近原生类增删思路的写法，直接在样式块内做条件判断，无需额外抽离判断函数

export const HamburgerButtonContainer = styled.button`
  /* 按钮的默认基础样式 */
  border: 1px solid red;

  /* 激活状态下的覆盖样式，效果等价于原生的button--active类 */
  ${({ active }) => active && `
    border: 10px solid green;
  `}
`;

这种实现和你熟悉的原生CSS开发逻辑完全对齐：

• 固定书写的样式对应按钮无附加类时的默认表现
• 基于props判断输出的样式块，等价于激活状态下追加到元素上的修饰类样式
• 后书写的样式会自动覆盖前面的同属性值，和原生类的样式覆盖规则一致，不需要手动调整选择器优先级

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