Как изменить высоту гармошки в реакции? - PullRequest
1 голос
/ 01 июля 2019

Я создал аккордеон, используя библиотеку пользовательского интерфейса Prime Reaction.

Я просто не хочу менять высоту аккордеона, чтобы он занимал большую часть страницы.Аккордеон отвечает на изменение ширины в теге стиля, , но не реагирует на высоту. Мой вопрос: как вы меняете высоту?

export class ThirdPageAccordions extends Component {
    render() {
        return (
            <div align="left" className="content-section implementation">
                <center>
                <Accordion style={{height: "50px", width: "100px"}} >
                    <AccordionTab header=" Data"  >
                    <DataTableinAccordion />
                    </AccordionTab>
                    <AccordionTab header=" Details">
                        <p></p>
                    </AccordionTab>
                    <AccordionTab header="Details II">
                        <p>Details II</p>
                    </AccordionTab>
                    <AccordionTab header="Cars">
                        <p> Cars </p>
                    </AccordionTab>
                    <AccordionTab header=" Summary">
                        <p> summary </p>
                    </AccordionTab>
                    </center>
                    </div>
                    );
                 }
             }

РЕДАКТИРОВАТЬ: То, что обведено красным, это то, что я пытаюсь увеличить

Whats circled in red is what I'm attempting to make larger

Это дополнительное пространство между заголовком данных изаголовок машины был результатом изменения высоты с помощью headerstyle {{height: "300px"}}

EDIT 2: Я добавил это здесь:

<Accordion  >
    <AccordionTab headerStyle={{height: "50px", }} header="DATA" >
</Accordion>

1 Ответ

0 голосов
/ 01 июля 2019

Вместо использования style, вы должны использовать contentStyle, как сказано в документах в Properties For AccordionTab. Вы должны изменить стиль AccordionTab.

<AccordionTab headerstyle={{height: "50px", width: "100px"}} >
    ...
</AccordionTab>

Вы также можете изменить стиль заголовка с помощью headerStyle.

Если вы хотите передать className, вы должны использовать contentClassName и headerClassName.

...