问题描述
我对 React 还很陌生,我正在使用样式组件。
const Button = styled.button`
height: 35px;
width: 85px;
color: #0288d1;
border: 1px solid #0288d1;
background: white;
border-radius: 1px;
&:hover {
cursor: pointer;
background: #cfe8ef;
}
&:focus {
background: #0288d1;
color: white;
}
`;
当用户点击屏幕上的其他地方时,我想防止按钮失去焦点。我是否需要添加额外的 JavaScript 代码来执行此操作,或者是否有可以帮助我解决此问题的 CSS 属性?
解决方法
试试下面的:
const setFocus = e => {
e.target && e.target.focus();
};
return (
<button
onBlur={e => {
setFocus(e);
}}
>
My Button
</button>
);
,
您可以在全局样式表中添加 :active
。
button:active {
border: 2px solid #000;
}
所以任何时候,button
标签都会在活动模式下接收这种样式。