Satelites and center content badly positioned on fresh CRA 5 / React 18.2 project (styles are missing)

[alex-kowalczyk]

After upgrading from React 16.8/react-scripts 4 to 18.2/5, Planet stopped to properly position the orbital system. "Satellites" are put in a vertical row, "Center content" is put as the last item.

Minimal reproduction scenario:

1. Initialize react app (ensure using latest cra 5.0.x; if installed before via npm install -g then remove)

npx create-react-app r18
cd r18
npm install --save react-planet@1.0.1

2. Inspect package.json to ensure the app uses react 18.2.x and react-scripts 5.x

3. Edit default App.js, adding a simple planet with 2 satellites

import {useState} from 'react';
import {Planet} from 'react-planet';
import './App.css';

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div className="App">
      <header className="App-header">
        <Planet bounceOnClose orbitRadius={60} hideOrbit
                open={open} onClick={() => setOpen(true)} onClose={() => setOpen(false)}
                centerContent={<div style={{border: '1px solid white'}}>Center</div>}
        >
            <div style={{border: '1px solid white'}}>1</div>
            <div style={{border: '1px solid white'}}>2</div>
        </Planet>
      </header>
    </div>
  );
}

export default App;

Expected result: nice orbital system
Actual result: heavily mispositioned.

Seems that makeStyles-root-X are not defined in output code, resulting in missing z-index and position:absolute styles. This makes top and left styles inactive (on screenshot - grayed out with tooltip "top has no effect on this element since it’s not a positioned element. Try setting its position property to something other than static.")

[dns-entity]

I got the same problem. I didn't find the right solution, but I found that "z-index" and "position: absolute" are successfully applied when <React.StrictMode> is disabled. The planets fall into place :)

[ephraimrothschild]

I got the same problem. I didn't find the right solution, but I found that "z-index" and "position: absolute" are successfully applied when <React.StrictMode> is disabled. The planets fall into place :)

This works, but I feel like this shouldn't be the correct way to do this

[averwhy]

Also having this problem and i can confirm StrictMode is breaking it.