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

Question

React 样式组件按钮没有获得焦点

这是我继承的一些代码（见下文）。有带有标题和相应按钮（书签）的行。使用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;
`;

图标.BookmarkCheck

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

Answer 1

您是否尝试过添加tabIndex={0}？

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

Answer 2

经过一番橡皮擦后，我恍然大悟，不是样式组件导致问题，而是样式组件的 CSS。

删除outline: none，当然可以。