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.

2 Likes

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

Has this been addressed on the latest versions?
I am having this issue also.

Hey @jerry,

Not yet, currently the Web SDK is designed to be the whole page.

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.

Thanks,
Tommy

Hi, Does the WebSDK creates inline styles with JS?
I’m also encounter this issue when the meeting breaks my styles. I Tried overloading some classes but it’s a lot. could be just a css that the Zoom SDK uses not all bootstrap styles?

Hey @spinar,

Please see my advice above on how to host the Web SDK without breaking your styling ^

Thanks,
Tommy

Thanks, Yes I separate the meeting part from my App. and now it’s normal.

1 Like

Great! :slight_smile:

Thanks,
Tommy