:focus 不适用于 :hover with styled-component for React.js

如何解决:focus 不适用于 :hover with styled-component for React.js

我想创建一个蓝图组件（输入）并且我希望它可以轻松定制，所以我决定使用 styled-component 包。 这里的问题是 :focus 属性在 :hover 属性时不起作用。 我尝试了许多类似问题的解决方案，但没有结果。也许我错过了什么？

顺便说一下，我还是 react.js 的新手。

更新：似乎在焦点效果之后发生悬停效果，我在焦点上添加了宽度（扩展）：框扩展而没有任何动画（我猜是因为事实那个悬停动画打断了它）并且边框颜色切换到悬停颜色......

更新 2： 我切换了在组件中写入 :focus 和 :hover 的顺序，首先是 :hover，然后是 :focus 第二：现在焦点起作用而悬停不起作用：和所以订单很重要。

特定组件（使用 styled-component 创建）

  const Comp = styled.input.attrs((props) => ({
    type: "text",size: props.small ? 5 : undefined,}))`
    border-radius: ${borderRadius};
    border: ${borderWidth} ${borderStyle} ${borderColor};
    padding: ${padding};
    margin: ${margin};
    width: ${width}
    color: ${color};
    outline: none;
    font-size: ${fontSize};
    font-style: ${fontStyle};
    font-weight: ${fontWeight};
    background-color: ${bgColor};
    :placeholder {
      color: ${placeholderColor};
    }
    &:focus {
      border-color: ${focusColor};
      color: ${focusColor};
      width : ${focusExpansion};
      animation: onFocus 0.7s;
    }
    &:not(:focus) {
      border-color: ${borderColor};
      color: ${color};
      width: ${width};
      animation: offFocus 0.7s;
    }
    @keyframes onFocus {
      from {
        border-color: ${borderColor};
        color: ${color};
        width: ${width};
      }
      to {
        border-color: ${focusColor};
        color: ${focusColor};
        width: ${focusExpansion};
      }
    }
    @keyframes offFocus {
      from {
        border-color: ${focusColor};
        color: ${focusColor};
        width: ${focusExpansion};
      }
      to {
        border-color: ${borderColor};
        color: ${color};
        width: ${width};
      }
    }
    &:hover {
      border-color: ${hoverColor};
      color: ${hoverColor};
      animation: onHover 0.7s;
    }
    &:not(:hover) {
      border-color: ${borderColor};
      color: ${color};
      animation: offHover 0.7s;
    }

    @keyframes onHover {
      from {
        border-color: ${borderColor};
        color: ${color};
      }
      to {
        border-color: ${hoverColor};
        color: ${hoverColor};
      }
    }

    @keyframes offHover {
      from {
        border-color: ${hoverColor};
        color: ${hoverColor};
      }
      to {
        border-color: ${borderColor};
        color: ${color};
      }
    }
  `;
 

完整文件

import styled from "styled-components";

const InputBox = (props) => {
  const defaultFontSize = "15px";

  const padding = props.padding != null ? props.padding : "3px 10px 3px 10px";
  const margin = props.margin != null ? props.margin : "0px";
  const width = props.width != null ? props.width : "100px";
  const color = props.color != null ? props.color : "black";
  const borderStyle = props.borderStyle != null ? props.borderStyle : "solid";
  const borderWidth = props.borderWidth != null ? props.borderWidth : "3px";
  const borderColor = props.borderColor != null ? props.borderColor : color;
  const borderRadius = props.borderRadius != null ? props.borderRadius : "0px";
  const fontSize = props.fontSize != null ? props.fontSize : defaultFontSize;
  const fontStyle = props.fontStyle != null ? props.fontStyle : "normal";
  const fontWeight = props.fontWeight != null ? props.fontWeight : "normal";
  const placeholder =
    props.placeholder != null ? props.placeholder : "placeholder";
  const placeholderColor =
    props.placeholder != null ? props.placeholder : "grey";
  const bgColor = props.bgColor != null ? props.bgColor : "none";
  const hoverColor = props.hoverColor != null ? props.hoverColor : color;
  const focusColor = props.focusColor != null ? props.focusColor : color;
  const focusExpansion =
    props.focusExpansion != null ? props.focusExpansion : width;

  const Comp = styled.input.attrs((props) => ({
    type: "text",}))`
    border-radius: ${borderRadius};
    border: ${borderWidth} ${borderStyle} ${borderColor};
    padding: ${padding};
    margin: ${margin};
    width: ${width}
    color: ${color};
    outline: none;
    font-size: ${fontSize};
    font-style: ${fontStyle};
    font-weight: ${fontWeight};
    background-color: ${bgColor};
    :placeholder {
      color: ${placeholderColor};
    }
    &:focus {
      border-color: ${focusColor};
      color: ${focusColor};
      width : ${focusExpansion};
      animation: onFocus 0.7s;
    }
    &:not(:focus) {
      border-color: ${borderColor};
      color: ${color};
      width: ${width};
      animation: offFocus 0.7s;
    }
    @keyframes onFocus {
      from {
        border-color: ${borderColor};
        color: ${color};
        width: ${width};
      }
      to {
        border-color: ${focusColor};
        color: ${focusColor};
        width: ${focusExpansion};
      }
    }
    @keyframes offFocus {
      from {
        border-color: ${focusColor};
        color: ${focusColor};
        width: ${focusExpansion};
      }
      to {
        border-color: ${borderColor};
        color: ${color};
        width: ${width};
      }
    }
    &:hover {
      border-color: ${hoverColor};
      color: ${hoverColor};
      animation: onHover 0.7s;
    }
    &:not(:hover) {
      border-color: ${borderColor};
      color: ${color};
      animation: offHover 0.7s;
    }

    @keyframes onHover {
      from {
        border-color: ${borderColor};
        color: ${color};
      }
      to {
        border-color: ${hoverColor};
        color: ${hoverColor};
      }
    }

    @keyframes offHover {
      from {
        border-color: ${hoverColor};
        color: ${hoverColor};
      }
      to {
        border-color: ${borderColor};
        color: ${color};
      }
    }
  `;

  return <Comp placeholder={placeholder} />;
};

export default InputBox;

在应用中的使用

import React from "react";
import EditText from "./components/EditText";
import InputBox from "./components/InputBox";
import Colors from "./Colors";

const App = () => {
  return (
    <div>
      <InputBox
        padding={"10px"}
        margin={"20px"}
        color={Colors.BLUE}
        hoverColor={Colors.GREEN_MEADOW}
        focusColor={Colors.ORANGE}
        borderRadius={"50px"}
        borderWidth={"4px"}
        fontStyle={"italic"}
        fontWeight={"bold"}
      />
    </div>
  );
};

export default App;

解决方法

回答我自己的问题，经过几个小时的 styled-component 实验： 事实证明，（悬停）和（焦点）的顺序很重要，最后一个覆盖第一个产生的效果，这就是为什么在两个选择器（悬停和焦点）中使用动画更改相同属性的原因' t 产生良好的结果。