Incorrect styling for foldable section

[johanbook]

I tried following the simple example and spinning up react-chart-editor, but it seems some styling is incorrect as seen in attached image.

I run the editor as

import "react-chart-editor/lib/react-chart-editor.min.css";

import * as React from "react";
// @ts-ignore // exists no types for `react-chart-editor`
import PlotlyEditor from "react-chart-editor";

// @ts-ignore // types not available for `plotly.js/dist`
import plotly from "plotly.js/dist/plotly";

const EDITOR_CONFIG = { editable: true };

...


export function DataExplorer({
  data,
  dataSourceOptions,
}: SomeProps): React.ReactElement {
  const [state, setState] = React.useState({
    data: [],
    layout: {},
    frames: [],
  });

  return (
    <PlotlyEditor
      advancedTraceTypeSelector
      config={EDITOR_CONFIG}
      data={state.data}
      frames={state.frames}
      layout={state.layout}
      dataSources={data}
      dataSourceOptions={dataSourceOptions}
      plotly={plotly}
      onUpdate={(data: any, layout: any, frames: any) =>
        setState({ data, layout, frames })
      }
      useResizeHandler
    />
  );
}

With versions

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1",

Have I missed something?

[dmt0]

@johanbook Could you try running it with React 16?

[johanbook]

I created a basic template with Create-React-App with React 17 and then managed to run this code without the issue so it's likely some issue in some other part of my code base

[johanbook]

It seems is the same as #745 and the problem is to the css property box-sizing being set by a style library (Material UI). I fixed it by adding the equivalent of

.folder {
  box-sizing: "content-box"
}

to the global css. Works but not the prettiest