ZoomMtg is overwriting all css in my entire ReactJS website

@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.

2 Likes

Great! :slight_smile:

Thanks,
Tommy

How can find the css style of the zoom sdk, I cannot find the style zmmtg-root with in the local version of sample app? I tried add a new css style to overload the previous style, but it fails when the meeting starts(it turns back to full-screen)

Could you please tell me how to modify your sample app into a small size window app?

Hey @shipeng_liu,

The Web SDK does not support custom styling. If you want custom styling, please use the Customizable SDK once it is available:

Thanks,
Tommy

Hi @tommy,

I wanted to try a proof of concept with Customizable Zoom SDK, but it seems that “getting started” chapter forwards always to a form where information should be entered which is. anyway associated with my account, and from there I am always taken to apply for a demo or buy.

Under developer account there is nothing to find related to customizable SDK.

This doesn´t work because there is no package in npm with this name.

npm install @zoomus/instantsdk --save

Is there any working instructions to try the new SDK?

Thanks,
Said

Hey @saidoudou,

Checkout my post here:

For additional Fully Customizable Web SDK questions, please post them here: #fully-customizable-web-sdk

Thanks,
Tommy

hi @tommy

thank you very much for your reply.

Said

1 Like

You are welcome! :slight_smile:

-Tommy

error to screen share in my zoom application using reactjs

Hey @basponcollege,

Thank you for reaching out to the Zoom Developer Forum. Please submit a new forum topic and fill out the post template so that we have enough information to assist.

Thanks,
Max