我只是不想改变手风琴的高度,所以它占据了更多的页面。手风琴响应样式标签中的宽度,但不响应高度。。我的问题是如何更改高度?
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>
);
}
}
编辑:红色圆圈是我要扩大的内容
数据标题和汽车标题之间的多余空间是通过标题样式{{height:“ 300px”}}
更改高度的结果编辑2:我在这里添加了它:
<Accordion >
<AccordionTab headerStyle={{height: "50px", }} header="DATA" >
</Accordion>
答案 0 :(得分:0)
您应该使用style
中docs中的contentStyle
,而不要使用Properties For AccordionTab
。您应该更改AccordionTab
的样式。
<AccordionTab headerstyle={{height: "50px", width: "100px"}} >
...
</AccordionTab>
您还可以使用headerStyle
更改标题样式。
如果您想通过className
,则应使用contentClassName
和headerClassName
。