焦点不在使用:悬停使用React.js的样式组件
焦点不在使用:悬停使用React.js的样式组件
提问于 2021-03-11 22:32:08
我想要创建一个蓝图组件(输入)，我希望它很容易定制，所以我决定使用样式组件包。这里的问题是，当：属性悬停时，：focus属性无法工作。我尝试了许多类似问题的解决方案，但都没有结果。也许我遗漏了什么？
顺便说一下，我还是react.js的新手。
更新:好像悬停效果是在焦点效果之后发生的，我在焦点上添加了宽度(扩展)：框在没有任何动画的情况下展开(我猜由于悬停动画打断了它)和边框颜色切换到悬停颜色.
更新2: I切换了在组件中写入：和：的顺序，分别是:focus首先和:focus第二:现在focus工作，而没有:所以顺序很重要。
特定组件(使用样式组件创建)
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;回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-15 10:44:11
在对样式组件进行了数小时的实验之后，回答了我自己的问题:原来(悬停)和(焦点)的顺序很重要，最后一个顺序忽略了第一个的效果，这就是为什么在两个选择器(悬停和聚焦)中用动画改变相同的属性(悬停和聚焦)不会产生好的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66591534
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号