问题的根本原因在于组件样式中的 min-height 属性设置过小,导致当所有的面板关闭时,组件的高度被压缩。因此,我们可以在自己的代码中覆盖默认样式,增加一个 min-height 属性值。
示例代码如下:
import React from 'react'; import { Collapse } from 'antd';
const { Panel } = Collapse;
const customPanelStyle = { background: '#f7f7f7', borderRadius: 4, marginBottom: 24, border: 0, overflow: 'hidden', minHeight: 100 //增加最小高度 };
class Demo extends React.Component {
render() {
return (
{text} {text} {text}
);
} }
export default Demo;
在本示例代码中,我们给 customPanelStyle
添加了 minHeight: 100
属性。这将确保即使所有面板关闭时,组件也不会被压缩。