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

Posted 2023-02-22

【中文标题】如何在反应中改变手风琴的高度？

【英文标题】：How to change the height of an accordion in react?

【发布时间】：2019-11-12 04:36:49

【问题描述】：

我使用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>
                    );
                 
             

编辑：红色圈出的是我试图放大的内容

数据头和汽车头之间的额外空间是通过 headerstyleheight: "300px" 改变高度的结果

编辑 2： 我在这里添加了它：

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

【参考方案1】：

您应该使用contentStyle，而不是使用style，正如docs in Properties For AccordionTab 中所说的那样。你应该改变AccordionTab的风格。

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

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

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

【讨论】：

试了一下，高度保持不变

是的，我尝试使用更高的像素数，百分比高度没有变化

@JavaHava 只要找到解决方案，看看我的编辑

啊，既然你已经澄清了，这就更有意义了。我在选项卡标题中添加了这行代码： headerStyle=height: "500px" 并且高度发生了变化，除了它只是增加了手风琴之间的空白而不是标题的高度。我在我的帖子中发布了这个样子

@JavaHava 请更清楚您要更改的高度。您正在将样式传递给 Accordion，但您并不清楚要更改的内容。