如何通过Props为Styled Component传入Hover样式？

方法一：在:hover伪类中动态插值传入的样式对象 #

利用styled-components的props插值能力，结合:hover伪类直接应用传入的hoverStyle，同时处理未传入的边界情况：

import styled from 'styled-components';
import { CSSProperties } from 'react';

const StyledButton = styled.div<{
  hoverStyle?: CSSProperties
}>`
  color: black;
  background: blue;
  cursor: pointer;

  &:hover {
    ${props => props.hoverStyle && Object.entries(props.hoverStyle).map(([key, value]) => {
      // 将驼峰式CSS属性转为短横线命名（如backgroundColor → background-color）
      const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
      return `${cssKey}: ${value};`;
    }).join('')}
  }
`;

// 使用示例
<StyledButton
  hoverStyle={{
    backgroundColor: 'red',
    color: 'white',
  }}
>
  My button
</StyledButton>

方法二：借助css辅助函数优化写法 #

用css函数让样式逻辑更清晰，本质和方法一原理一致：

import styled, { css } from 'styled-components';
import { CSSProperties } from 'react';

const StyledButton = styled.div<{
  hoverStyle?: CSSProperties
}>`
  color: black;
  background: blue;
  cursor: pointer;

  ${props => props.hoverStyle && css`
    &:hover {
      ${Object.entries(props.hoverStyle).map(([key, value]) => {
        const cssKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
        return `${cssKey}: ${value};`;
      }).join('')}
    }
  `}
`;

方法三：用React状态模拟hover效果（备选） #

如果不想在styled组件内部处理伪类逻辑，可以通过组件状态模拟hover，直接传递内联样式：

import { useState } from 'react';
import styled from 'styled-components';

const BaseButton = styled.div`
  color: black;
  background: blue;
  cursor: pointer;
`;

const StyledButton = ({ hoverStyle, children }: { hoverStyle?: CSSProperties, children: React.ReactNode }) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <BaseButton
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={isHovered ? hoverStyle : {}}
    >
      {children}
    </BaseButton>
  );
};

// 使用示例
<StyledButton
  hoverStyle={{
    backgroundColor: 'red',
    color: 'white',
  }}
>
  My button
</StyledButton>

注意事项 #

• 前两种方法需要将React的驼峰式CSS属性转为原生短横线命名，因为styled-components模板字符串要求标准CSS语法。
• 如果hoverStyle包含嵌套选择器等复杂逻辑，建议优先使用方法三或调整props的样式传递方式。

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