How to inject ketcher-react into an existing react application

[luna215]

Hi, I spun up a quick react 18 application using this tutorial: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Then I did install npm install ketcher-react and got the following errors:

pm ERR! While resolving: ketcher-react@2.5.2
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.4
npm ERR!   node_modules/@emotion/react
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.4
npm ERR!     node_modules/@emotion/styled
npm ERR!       peerOptional @emotion/styled@"^11.3.0" from @mui/material@5.10.5
npm ERR!       node_modules/@mui/material
npm ERR!         @mui/material@"^5.2.4" from ketcher-react@2.5.2
npm ERR!         node_modules/ketcher-react
npm ERR!         1 more (miew-react)
npm ERR!       4 more (@mui/styled-engine, @mui/system, ketcher-react, miew-react)
npm ERR!     peerOptional @emotion/react@"^11.5.0" from @mui/material@5.10.5
npm ERR!     node_modules/@mui/material
npm ERR!       @mui/material@"^5.2.4" from ketcher-react@2.5.2
npm ERR!       node_modules/ketcher-react
npm ERR!         ketcher-react@"^2.5.2" from the root project
npm ERR!       1 more (miew-react)
npm ERR!     4 more (@mui/styled-engine, @mui/system, ketcher-react, miew-react)
npm ERR!   19 more (@emotion/styled, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from ketcher-react@2.5.2
npm ERR! node_modules/ketcher-react
npm ERR!   ketcher-react@"^2.5.2" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2" from ketcher-react@2.5.2
npm ERR!   node_modules/ketcher-react
npm ERR!     ketcher-react@"^2.5.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/paulluna/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/paulluna/.npm/_logs/2022-09-14T05_37_25_431Z-debug-0.log

I easily solved this by running this command: npm install ketcher-react --legacy-peer-deps

Then I proceeded to try to inject ketcher from this discussion: #578

And here is my code that I have in my react app:

It's very minimal, but when I build and run the application, I get this:

I can't seem to make the editor smaller - even after I wrapped it with a parent node with a fixed size. Can someone help with this? Does this mean I'm missing some sort of styling?

[Jo-Zh]

may be add this line:
import 'ketcher-react/dist/index.css';