ZoomMtg is overwriting all css in my entire ReactJS website

Meeting SDK Web
2

@tommy
I have found this particular post you have explain to the same problem what I have.

Unfortunately, it is not working for me.

I have created <div id="zmmtg-root"/> inside the render() of my component class. But still I do see that there is a div tag being appended at the index.html of my react app.

Then I added the given css into my styles.css file which I kept all my css stylings.
But it did not resolve the overflow: hidden; issue. Also my entire css styles are being messed up. And I’m seeing my entire page black. (only the MeetingComponent view)

Below is my code structure:

my styles.css file

html, body {
  overflow: auto;
}

body > #zmmtg-root {
  display: none;
}

#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 1000px;
  height: 500px;
  position: relative;
}

#wc-footer {
  bottom: auto !important;
  width: 1000px !important;
}

#dialog-join {
  width: 1000px !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 500px !important;
  width: 1000px !important;
}

.suspension-window {
  transform: translate(-444px, 10px) !important;
}

#dialog-invite {
  display: none;
}

Below is my component class

import React, {Component} from "react"
import  {ZoomMtg} from "@zoomus/websdk"
import "@zoomus/websdk/dist/css/bootstrap.css"
import "@zoomus/websdk/dist/css/react-select.css"

import "../../assets/css/bootstrap.min.css"
import "../../assets/css/fontawesome.min.css"
import "../../assets/css/themify-icons.css"
import "../../assets/css/custom.css"
import "../../assets/css/style.css"

class MeetingComponent extends Component {

render() {
return (
      <section className="watch-live">
        <p>some text</p>
        <div id="zmmtg-root"/>
      </section>
    )
}
}