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

Question

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

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

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

有没有办法访问从样式组件生成的类名？如果是这样，我可以使用 querySelector 并通过 querySelector.

访问 DOM 节点来执行通常的焦点捕获方式

Answer 1

首先，您的组件应该能够处理传入的 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} />

Answer 2

我能够通过使用 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

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

How to focus trap with styled-components? How to access classname from styled-components?

reactjs

modal-dialog

focus

accessibility

styled-components