'ZoomMtg is overwriting all css in my entire ReactJS website

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.

cssreactjsstyling


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akash Chavda

Related Questions