Пользовательский Аккордеонный Компонент не отображает элементы тела

Question

У меня есть компонент свертывания / аккордеона из Antd, который я настроил и экспортировал из папки элементов из своего приложения, чтобы я мог повторно использовать его в приложении.

Когда я импортирую его и включаю в другой компонент, я не могу рендерить элементы тела внутри. Кто-нибудь знает, почему это происходит и есть ли способ обойти это?

Также как меньшая проблема, когда тело аккордеона открывается для отображения, пробел не заполняет весь контейнер, и похоже, что с правой стороны бежит серая колонна.

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

Пользовательский компонент свертывания

import React, { useState } from "react";
import styled from "styled-components";
import { Collapse as AntCollapse } from "antd";

const StyledCollapse = styled(AntCollapse)`
  &&& {
    border: none;
    border-radius: 0px;
    background-color: #f7f7f7;
    box-shadow: none;
  }
`;

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
      />
    </StyledCollapse>
  );
};

export default CustomCollapse;

Главный компонент

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import "antd/dist/antd.css";

import AntCollapse from "./CustomCollapse";

const Flexbox = styled.div`
  font-family: sans-serif;
  flex-direction: column;
  display: flex;
  justify-content: center;
  border: solid 1px palevioletred;
  padding: 10%;
  margin: 10%;
`;

const ConfigurationOptions = () => (
  <Flexbox>
    <AntCollapse header="configuration test">
      <h1>Test</h1>
      <p>Test Paragraph</p>
      <p>Test Paragraph</p>
    </AntCollapse>
  </Flexbox>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<ConfigurationOptions />, rootElement);

Answer 1

Вы забыли передать детей в своем пользовательском компоненте свертывания.

Чтобы заставить его работать, сделайте это:

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={props.header}
        key="1"
        showArrow={false}
        bordered={false}
        extra={<p style={{ color: "#0076de" }}>{disabled ? "SHOW" : "HIDE"}</p>}
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

(также, чтобы получить странную серую боковую колонку со стороны, вы должны сделать это так:

const CustomCollapse = props => {
  const [disabled, setDisabled] = useState(true);
  return (
    <StyledCollapse onChange={() => setDisabled(prev => !prev)}>
      <AntCollapse.Panel
        header={
          <span>
            {props.header}
            <span style={{ color: "#0076de", float: "right" }}>
              {disabled ? "SHOW" : "HIDE"}
            </span>
          </span>
        }
        key="1"
        showArrow={false}
        bordered={false}
      >
        {props.children}
      </AntCollapse.Panel>
    </StyledCollapse>
  );
};

)