Значок переключения не отображается на React-Accessible-Accordion
Я реализую React-available-accordion в своем приложении React. Функциональность щелчка работает нормально, но я не вижу значок стрелки на аккордеоне. Я попытался сравнить его со структурой DOM, показанной в примере в npm, и вижу, что div для самого значка не добавляется в мою DOM.
Мой код-
импортировать React из React; импортировать ReactDOM из react-dom;
Импортировать { Аккордеон, AccordionItem, AccordionItemTitle, AccordionItemBody, } из 'react-available-accordion';
импортировать 'react-available-accordion / dist / fancy-example.css'; импортировать 'react-available-accordion / dist / minimal-example.css';
<div className = "container">
<Accordion>
<AccordionItem>
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
</AccordionItemTitle>
<AccordionItemBody>
Some Text
</AccordionItemBody>
</AccordionItem>
</Accordion>
</div>
Значок стрелки появляется из
<div class = "accordion__arrow" role = "presentation"></div>
и это не добавляется для меня. Любая причина, почему это происходит. Я использую точный демонстрационный код, показанный на сайте npm.
Ссылка Я сослался-
https://www.npmjs.com/package/react-accessible-accordion
Насколько мне известно, единственное, что я не добавил, это,
document.querySelector('[data-mount]')
Это причина того, что мои значки со стрелками не загружаются? Я не уверен, что это открытая ошибка, но в показанных примерах эти значки есть в каждом аккордеоне.
Ответы 4
Вы импортировали стиль CSS?
// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';
Добавление ниже в AccordionTitle решает проблему -
<h3 className = "u-position-relative">
Accessible Accordion
<div className = "accordion__arrow" role = "presentation"/>
</h3>
Вам нужно сделать пару вещей, чтобы все заработало:
1] Вам необходимо скопировать все содержимое этого файла '' act-available-accordion / dist / fancy-example.css '; в другой файл, потому что мы собираемся переопределить некоторые классы.
2] Вам нужно добавить div в AccordionItemTitle
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
<div className = "accordion__arrow" role = "presentation" />
</AccordionItemTitle>
3] в созданной вами таблице стилей введите следующие стили
.accordion__item {
position: relative;
}
.accordion__arrow {
display: inline-block;
width: 24px;
height: 12px;
position: absolute;
top: 40px;
right: 15px;
margin-top: -6px;
}
После этого должна появиться кнопка переключения.
добавить этот фрагмент кода
<AccordionItemTitle>
<h3 className = "u-position-relative">
Accessible Accordion
<div className = "accordion__arrow" role = "presentation" />
</h3>
</AccordionItemTitle>
Да, я добавил стили css, оба из которых упомянуты в примере.