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"
I do not see any error on the browser. But in my index.html file I see the following tag has been added automatically.
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)
@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.
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?