[英]:focus is not working with :hover with styled-component for React.js
我想创建一个蓝图组件(输入)并且我希望它可以轻松定制,所以我决定使用样式组件 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;
回答我自己的问题,经过数小时的 styled-component 实验:事实证明,(悬停)和(焦点)的顺序很重要,最后一个会覆盖第一个产生的效果,这就是为什么要更改相同的属性,使用 animation,在两个选择器(悬停和焦点)中都不会产生好的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.