react-big-calendar not rendering anything inside other components-CodePudding

I'm trying to create some application with react-big-calender, but I'm facing some weird behavior of it. If I wrap it inside any other component other than directly rendering it, it doesn't show anything at all.

const App = () => {
  return (
    <div>
      <Cal />
    </div>
  );
};

ReactDOM.render(<Cal />, document.getElementById("root")); //<- works
ReactDOM.render(<App />, document.getElementById("root")); //<- works, but doesn't show anything

And that Cal module is defined as it was defined in their example

Here is my codesandbox

CodePudding user response：

This problem is not related with react-big-calender, its the problem of CSS.

Try

<div style={{ width: "100%", height: "100%" }}>
  <Cal />
</div>