Блог

Главная - Вопросы по программированию - Как сфокусировать ловушку с помощью styled-components? Как получить доступ к classname из styled-components?

Как сфокусировать ловушку с помощью styled-components? Как получить доступ к classname из styled-components?

#reactjs #modal-dialog #focus #accessibility #styled-components

#reactjs #модальный диалог #фокус #Специальные возможности #styled-components

Вопрос:

В настоящее время я использую styled-components 5.0.1 с React. https://styled-components.com /

Для контекста моя цель — сфокусировать ловушку в модальном.

Моя проблема в том, что имена классов генерируются случайным styled-components образом, поэтому я не могу получить доступ к этим DOM-узлам querySelector . Моя другая проблема заключается в том, что я не могу использовать перенаправление React ref, поскольку мне пришлось бы выполнять много переадресации ссылок между деревьями компонентов.

Есть ли способ получить доступ к classname, который создается из styled-components? Если это так, я могу использовать querySelector и использовать обычный способ захвата фокуса, получая доступ к узлам DOM через querySelector .

Ответ №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} />

Ответ №2:

Я смог решить эту проблему, обратившись к узлам DOM с помощью data- атрибута.

Например,

 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
Метки: