如何使用样式组件聚焦陷阱？如何从样式组件访问类名？答案

【问题标题】：How to focus trap with styled-components? How to access classname from styled-components?如何使用样式组件聚焦陷阱？如何从样式组件访问类名？
【发布时间】：2021-04-19 22:05:30
【问题描述】：

我目前正在使用 styled-components 5.0.1 和 React。 https://styled-components.com/

对于上下文，我的目标是将陷阱集中在模态中。

我的问题是类名是从styled-components 随机生成的，所以我无法使用querySelector 访问这些DOM 节点。我的另一个问题是我无法使用 React 引用转发，因为我必须在组件树之间进行大量引用转发。

有没有办法访问从样式组件生成的类名？如果是这样，我可以使用querySelector 并通过querySelector 访问DOM 节点来进行通常的焦点捕获方式。

【问题讨论】：

标签： reactjs modal-dialog focus accessibility styled-components

【解决方案1】：

我能够通过使用 data- 属性访问 DOM 节点来解决此问题。

例如，

const myComponent = styled.div`
  // ...styles here
`;

const foo = () => (
  <myComponent
    data-foo-bar="foobar"
  />
);

console.log(document.querySelector('[data-a11y-id="HeaderNavBar-SearchButton"]');
// returns the DOM element for myComponent

【讨论】：

【解决方案2】：

首先，您的组件应该能够处理传入的 css：

import styled from "styled-components";
    
    const Box = styled.div`
      color: red;
      ${props => props.addCSS}
    `;
    
    const DatePicker = () => <Box>DatePicker</Box>;

其次，声明css样式。

import { css } from "styled-components";

const myCSS = css`
  font-size: 60px;
`;

最后，将其传递给子组件。

<DatePicker addCSS={myCSS} />

【讨论】：