:focus 不適用於：hover 與 React.js 的 styled-component

Question

我想創建一個藍圖組件（輸入）並且我希望它可以輕松定制，所以我決定使用樣式組件 package。 這里的問題是:focus屬性在:hover屬性時不起作用。 我嘗試了許多類似問題的解決方案，但沒有結果。 也許我錯過了什么？

順便說一句，我還是 react.js 的新手。

UPDATE: It seems like the hover effect is taking place after the focus effect, I added width (expansion) onfocus: the box expanded without any animation ( I guess due to the fact that hover animation interrupted it ) and border color switched to hover color ...

更新2：我切換了順序：焦點和：hover在組件中寫入，首先：hover，然后：焦點第二：現在焦點有效，hover和soPORT不要。

特定組件（使用 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",
    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};
      }
    }
  `;

  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;

Answer 1

回答我自己的問題，經過數小時的 styled-component 實驗：事實證明，（懸停）和（焦點）的順序很重要，最后一個會覆蓋第一個產生的效果，這就是為什么要更改相同的屬性，使用 animation，在兩個選擇器（懸停和焦點）中都不會產生好的結果。