时间戳

首页 > 解决方案 > React styled-component 按钮没有获得焦点

reactjs - React styled-component 按钮没有获得焦点

问题描述

React styled-component 按钮没有获得焦点

这是我继承的一些代码（见下文）。有带有标题和相应按钮（书签）的行。使用tab按钮，我可以专注于标题。在另一个tab焦点移动到样式按钮，但没有焦点环。在下一个tab焦点转到带有焦点环的下一个标题，依此类推。

为什么 styled.button 没有获得焦点？

如果 IconWrapper 样式的组件（如下所列）被替换为，<button></button>则图标获得焦点并具有焦点环。

<button
    ref={node => (this.removeBookmarkBtns[i] = node)}
    aria-label="Remove bookmark"
    onClick={() => {this.markForRemoval(bookmark, i);}}
    >
    <BookmarkIcon />
</button>

继承代码

import styled from "styled-components";

<div>
    ... irrelevant stuff

    <IconWrapper
        ref={node => (this.removeBookmarkBtns[i] = node)}
        aria-label="Remove bookmark"
        onClick={() => {this.markForRemoval(bookmark, i);}}
    >
        <BookmarkIcon />
    </IconWrapper>

    ... irrelevant stuff
</div>

相关的按钮样式组件

const IconWrapper = styled.button`
    color: ${theme.colors.primary};
    font-size: 2em;
    cursor: pointer;
    margin-left: 10px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    outline: none;
`;

const BookmarkIcon = styled(Icons.BookmarkCheck)`
    display: block;
    overflow: visible;
`;

Icon.BookmarkCheck

Icons.BookmarkCheck = props => (
    <SVG {...props}>
        <path d="m256 512a254.4 ...
    </SVG>
);

标签： reactjsfocusstyled-components

解决方案

经过一番橡皮擦后，我突然意识到不是样式组件导致了问题，而是样式组件的 CSS。

删除outline: none，当然它可以工作。

推荐阅读