-1

Zoom websdk is used to integrate the zoom video platform into your application.

Here is the package for the same @zoomus/websdk.

All things are working fine for that video UI you've to import this CSS in your file. But the issue with this whole application is affected with this CSS and your styling is disturbed when you import this line to the main file.

import "@zoomus/websdk/dist/css/bootstrap.css"
import "@zoomus/websdk/dist/css/react-select.css"

Check out zoom forum for the same.

Akash Chavda
  • 125
  • 9

2 Answers2

0

To resolve this I do a little twist in that

  1. First you've to create a separate component that contains a code for zoomsdk like getting the signature and init the zoom all of that stuff.
  2. Don't import those zoom related CSS to the parent file instead of that will go with another method.

Here is the step you need to follow

  1. Copy those css file from node_modules to public folder.
  2. Install react-helmet or react-helmet-async
  3. In the same component write this line of code
 <Helmet>
   <link type="text/css" rel="stylesheet" href="/zoom-bootstrap.css" />
   <link type="text/css" rel="stylesheet" href="/zoom-react-select.css" />
 </Helmet>
Akash Chavda
  • 125
  • 9
0

One workaround can be to use React.lazy on its parent component.

I am using this temporarily until I find a complete solution to this.

import { ZoomMtg } from "@zoomus/websdk"; distors the ui for me. I am not importing the css. It does that automatically I think.

NiKHiL
  • 41
  • 3