Расположите 2 DIV один под другим в заголовке панели «Свернуть Antd» вместе с «Дополнительно»

Question

Я использую Свернуть Antd , и я хотел бы добавить 2 строки текста одна под другой в заголовке панели Свернуть вместе с дополнительным свойством для отображения некоторых значков и т. Д. c, как показано ниже:

     <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()}
      >

Я могу удалить Padding et c, чтобы получить нужный мне вид, но значки (значок настройки справа), которые я отображаю как часть getExtra (), испорчены. PFA изображение ниже. Как я могу сделать это правильно?

Я также попытался разделить всю область вкладки слушателя на разные столбцы с помощью строки, столбца. Даже в этом случае дополнительные значки справа перепутались.

ТИА

Answer 1

В getIcon для настройки Icon добавьте следующее свойство стиля.

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

ИЛИ

Если вы хотите использовать несколько значков, измените. .ant-collapse-header стили класса, как показано ниже.

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