css - 在 Antd 折叠面板标题中将 2 个 DIV 与 Extras 一起排列在另一个下面

Question

我正在使用Antd's Collapse我想在折叠面板标题中添加 2 个文本行，并添加额外的属性来呈现一些图标等，如下所示:

     <Panel
        header={
          <div>
            <div>This is panel header 1</div>
            <div style={{ fontSize: "10px" }}>This is panel header 1</div>
          </div>
        }
        key="1"
        extra={genExtra()}
      >

我可以删除填充等以获得我需要的外观，但是我作为 getExtra() 的一部分渲染的图标(右侧的设置图标)被搞乱了。 PFA 如下图。我怎样才能做到正确？

我还尝试使用 Row、Col 将完整的听者选项卡区域划分为不同的列。即便如此，右侧的额外图标还是困惑的。

TIA

Answer 1

在getIcon中，为设置Icon添加以下样式属性。

style={{position: 'absolute', right: '16px', top: '10px'}}

或者

如果您想使用多个图标，请更改 ..ant-collapse-header 类样式，如下所示。

.ant-collapse-header{
  display: flex;
  justify-content: space-between;
}