如何调整Ant Design折叠面板主体默认高度并设置折叠后最大高度为100px？

我来帮你搞定这个折叠面板的样式需求！针对你提到的「折叠后面板高度最大100px」和「修复主体默认高度」的问题，我们可以通过自定义CSS结合组件属性调整来实现，具体步骤如下：

1. 修正自定义样式里的错误 #

你当前的customPanelStyle里border: 50不符合CSS规范（border属性需要指定宽度、样式、颜色，比如border: 1px solid #ddd），先把这个调整成合理值，比如去掉默认边框：

const customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: '5px',
  width: 200,
  marginBottom: 0,
  border: 'none', // 修正为合理的边框样式，这里设为无边框
  overflow: 'hidden'
};

2. 控制折叠后的最大高度 #

Ant Design的折叠面板在收起状态下，对应的内容容器有特定的CSS类名，我们可以通过全局CSS或者CSS模块来设置它的最大高度：

/* 在全局CSS文件中添加 */
.common-coll-bar .ant-collapse-item-collapsed .ant-collapse-content {
  max-height: 100px;
  overflow: hidden;
}

这段代码会选中.common-coll-bar容器下收起状态的折叠面板内容区，限制它的最大高度为100px，超出部分自动隐藏。

3. 修复主体默认高度问题 #

Ant Design的折叠面板内容盒（.ant-collapse-content-box）默认带有内边距，可能导致高度不符合预期，我们可以调整它的样式让高度自适应：

.common-coll-bar .ant-collapse-content-box {
  padding: 0; /* 移除默认内边距，按需调整 */
  height: auto; /* 让内容高度自适应，避免固定高度 */
}

4. 调整组件属性避免默认样式冲突 #

为了让自定义样式更生效，建议把Collapse组件的bordered属性设为false，去掉默认的边框：

render() {
  return (
    <div className="common-coll-bar">
      <Collapse bordered={false} defaultActiveKey={['1']} onChange={callback}>
        <Panel header="This is panel header 1" key="1" style={customPanelStyle}>
          <p>{text}</p>
        </Panel>
      </Collapse>
    </div>
  );
}

补充说明 #

如果你的项目使用CSS Modules，记得把类名改成模块导出的名称（比如styles['common-coll-bar']）；如果用styled-components，也可以把这些样式封装成自定义的Collapse组件，这样更模块化。

这样调整后，折叠面板收起时会被限制在最大100px高度，同时主体区域的高度会根据内容自适应，解决默认高度的问题~

内容的提问来源于stack exchange，提问作者jayanes