使元素与样式化组件一起可标签化

时间:2019-08-29 09:51:57

标签: javascript html reactjs styled-components

我希望人们能够通过tab来“关注”我的div。到目前为止,我已经尝试过:

const Div = styled.div.attrs({
  tabindex: '0',
})`
  margin: auto;
  width: 100%;
  max-width: 1200px;
  height: 320px;
  background: url(${({ rtl }) => determineUrl(rtl)}) no-repeat center;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  @media (min-width: ${resolutions.min.mobile}px) and (max-width: ${resolutions.max.mobile}px){
    max-height: 240px;
  }
`;

这:

<Div tabindex={0}>...</Div>

以及

<Div tabindex={"0"}>...</Div>

这些不起作用,无法想到其他任何事情。

1 个答案:

答案 0 :(得分:2)

tabindex在React中不是有效的属性名称,应该为tabIndex,并且仅接受数字作为值,因此tabIndex={0}应该为您解决问题