如何改变反应中手风琴的高度？

Question

我使用 prime react UI library.

创建了手风琴

我只是不想更改手风琴的高度，因此它会占用更多页面。手风琴响应更改样式标签中的宽度，但不响应高度。我的问题是如何更改高度？

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

编辑：红色圈出的是我要放大的部分

data header 和 cars header 之间的额外 space 是通过 headerstyle{{height: "300px"}}

编辑 2： 我在此处添加：

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

Answer 1

而不是使用 style，您应该使用 contentStyle，正如 Properties For AccordionTab 中 docs 中所说的那样。您应该更改 AccordionTab 的样式。

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

您还可以使用 headerStyle 更改 header 样式。

如果你想传递 className 你应该使用 contentClassName 和 headerClassName.

如何改变反应中手风琴的高度？

How to change the height of an accordion in react?

reactjs

primereact