Значок переключения не отображается на React-Accessible-Accordion

Question

Я внедряю React-available-accordion в моем приложении React. Функция щелчка работает нормально, однако я не вижу значок стрелки на аккордеоне.Я попытался сравнить его со структурой DOM, показанной в примере в npm, и вижу, что div для самой иконки не добавляется в мой DOM.

Мой код-

import React from«реагируют»;импортировать ReactDOM из'act-dom ';

import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemBody,} из реагировать-доступного-аккордеона;/fancy-example.css';import 'response-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]')

Это причина, по которой мои значки со стрелками не загружаются?Я не уверен, является ли это открытой ошибкой, но показанные примеры имеют эти значки в каждом аккордеоне.

Answer 1

добавить свой кусок кода

<AccordionItemTitle>       
    <h3 className="u-position-relative"> 
             Accessible Accordion
        <div className="accordion__arrow" role="presentation" />
    </h3>
</AccordionItemTitle>

Answer 2

Добавление ниже в AccordionTitle, решает проблему -

<h3 className="u-position-relative"> 
Accessible Accordion 
<div className="accordion__arrow" role="presentation"/> 
</h3>

Answer 3

Вам нужно сделать пару вещей, чтобы это работало:

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;
}

После этого должна появиться кнопка переключения.

Answer 4

Вы импортировали стиль CSS?

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';