React.js使用styled-components时Input组件:focus与:hover伪类冲突问题

• CSS层叠规则的天然冲突：单独的&:hover和&:focus选择器权重完全相等，最终生效的样式完全由书写顺序决定，后写的规则会覆盖前面的，这就是你调换书写顺序就会让其中一个效果失效的本质原因。当元素同时满足悬停+聚焦状态时，没有更高优先级的规则接管，两个状态的样式会互相抢占，导致边框颜色最终停留在后定义的规则值上。
• 动画抢占导致状态跳变：你为:hover、:focus分别绑定了独立的@keyframes动画，当两个状态同时触发时，两个动画会互相争夺属性的控制权，直接中断宽度扩展的过渡过程，出现无动画直跳的现象。
• styled-components的新手写法bug：把Compstyled组件直接定义在InputBox函数的组件体内部，每次InputBox触发重渲染时，都会生成一个全新的styled组件实例，触发DOM树的销毁重建，所有伪类状态、动画的连续性都会被打断，这也是你尝试多种方案都不生效的隐藏关键原因。
• 选择器语法错误：placeholder的样式选择器用了单冒号的:placeholder，不符合CSS伪元素的双冒号规范，会导致样式失效；同时width: ${width}属性后漏写分号，会引发后续样式解析异常。

1. 修复styled-components重渲染问题
   • 把Comp组件移到InputBox组件的函数外部定义，所有需要动态调整的样式值，全部通过props透传到styled组件的模板字符串中获取，避免在组件内部闭包定义样式变量导致的重复组件创建。
2. 按优先级重排伪类规则
   按照*默认基础态 < :hover < :focus < :hover:focus（同时悬停+聚焦）*的优先级从上到下书写规则，其中&:hover:focus选择器的权重高于单独的hover、focus选择器，专门用来处理元素同时满足两个状态的场景，从根本上解决规则互相覆盖的问题。
3. 替换互斥的@keyframes动画为CSS过渡属性
   移除独立的onHover、offHover、onFocus、offFocus关键帧规则，给所有需要平滑切换的属性（border-color、color、width）统一添加transition配置，浏览器会自动在状态切换时计算平滑的补间动画，不会出现多动画互相抢占的问题。
4. 修正语法错误
   • 把placeholder的选择器修正为&::placeholder，匹配CSS伪元素的双冒号规范
   • 补全width属性后的分号，避免样式解析异常

import styled from "styled-components";

// 将styled组件移到函数外部，避免每次渲染重复创建组件实例
const Comp = styled.input.attrs((props) => ({
  type: "text",
  size: props.small ? 5 : undefined,
}))`
  /* 基础默认态 */
  border-radius: ${(props) => props.borderRadius || "0px"};
  border: ${(props) => props.borderWidth || "3px"} ${(props) => props.borderStyle || "solid"} ${(props) => props.borderColor || props.color || "black"};
  padding: ${(props) => props.padding || "3px 10px 3px 10px"};
  margin: ${(props) => props.margin || "0px"};
  width: ${(props) => props.width || "100px"};
  color: ${(props) => props.color || "black"};
  outline: none;
  font-size: ${(props) => props.fontSize || "15px"};
  font-style: ${(props) => props.fontStyle || "normal"};
  font-weight: ${(props) => props.fontWeight || "normal"};
  background-color: ${(props) => props.bgColor || "none"};
  /* 统一过渡配置，替代多组互斥keyframes */
  transition: all 0.7s ease;

  &::placeholder {
    color: ${(props) => props.placeholderColor || "grey"};
  }

  /* 悬停态（优先级低于focus） */
  &:hover {
    border-color: ${(props) => props.hoverColor || props.color};
    color: ${(props) => props.hoverColor || props.color};
  }

  /* 聚焦态（优先级高于单独hover） */
  &:focus {
    border-color: ${(props) => props.focusColor || props.color};
    color: ${(props) => props.focusColor || props.color};
    width: ${(props) => props.focusExpansion || props.width};
  }

  /* 同时悬停+聚焦的最高优先级态，避免互相覆盖 */
  &:hover:focus {
    border-color: ${(props) => props.focusColor || props.color};
    color: ${(props) => props.focusColor || props.color};
    width: ${(props) => props.focusExpansion || props.width};
  }
`;

const InputBox = (props) => {
  return <Comp 
    placeholder={props.placeholder || "placeholder"} 
    {...props}
  />;
};

export default InputBox;

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