ZoomMtg is overwriting all css in my entire ReactJS website

Description
I have created a new component class in React to include meeting view. I’m using web-sdk. I could join to a meeting in this particular component view. (e.g: MyMeetingComponent.js)

But all my other pages have become black and no scrolling. I have notice that if I remove this line in my component class my app is working fine but of course MyMeetingComponent will not be able to join a meeting.

import ZoomMtg from "@zoomus/websdk"

Error
I do not see any error on the browser. But in my index.html file I see the following tag has been added automatically.

<div id="root">
  </div class="App">...</div>
</div>

<div id="zmmtg-root"></div>

Which version?
1.7.7

Screenshots
If applicable, add screenshots to help explain your problem.

@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>
    )
}
}

The following changes enabled me to get back my application views again. I used !important keyword in css.

body {
  overflow: auto !important;
}

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

#zmmtg-root, .meeting-client, .meeting-client-inner {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
}

#wc-footer {
  bottom: auto !important;
  width: 100% !important;
}

#dialog-join {
  width: 100% !important;
}

#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
  height: 100% !important;
  width: 100% !important;
}

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

@tommy Now my problem is, ZoomMtg break my css. It simply override all my <h>, <p> <font> etc. It is not practical for me to include !important to all my own custom css stylesheets. If I do so, in return it will break zoom web view components. Also I am using external react components which have their css styles as well(e.g: DropDown component). I’m in a SPA application created using create-react-app. Please provide me a viable solution.

Watching this thread because I’m also looking for a solution to this.
Also developing a SPA and also getting my CSS broken by the web SDK
OP if you have figured this out please kindly let me know :slight_smile:

Hey @gabriel.rf0, @jude.niroshan11,

This is currently how the Web SDK works. You can try adjusting the Web SDK CSS or host the Web SDK on a sub domain / path seperate from your app so it does not break your styling.

We are working on a more customizable Web SDK in the future.

Thanks,
Tommy