Satelites and center content badly positioned on fresh CRA 5 / React 18.2 project (styles are missing) #11
Description
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:
- Initialize react app (ensure using latest cra 5.0.x; if installed before via
npm install -gthen remove)
npx create-react-app r18
cd r18
npm install --save [email protected]
-
Inspect package.json to ensure the app uses react 18.2.x and react-scripts 5.x
-
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.")
