CSS Override Issue with Zoom Meetings SDK in React App

Video SDK
1

I am writing to seek your assistance with an issue I am encountering while using the Zoom Meetings SDK (version ^3.6.0) in my React application.

Since integrating the SDK, I have noticed that the Zoom SDK is overriding a significant portion of my app’s CSS, which is causing layout and styling inconsistencies across various components. This interference is affecting the overall appearance and functionality of my app.

Here is my component:

import { ZoomMtg } from "@zoom/meetingsdk";

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

function Zoom() {
  const sdkKey = "";
  const meetingNumber = 89214304839;
  const passWord = "138300";
  const userName = "Support";
  const userEmail = "support@test.com";
  const signature ="";
  var leaveUrl = "";

  function startMeeting() {
    document.getElementById("zmmtg-root")!.style.display = "block";

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      patchJsMedia: true,
      success: (success: any) => {
        console.log(success);
        ZoomMtg.join({
          signature: signature,
          sdkKey: sdkKey,
          meetingNumber: meetingNumber,
          passWord: passWord,
          userName: userName,
          userEmail: userEmail,
          success: (success: any) => {
            console.log(success);
          },
          error: (error: any) => {
            console.log(error);
          },
        });
      },
      error: (error: any) => {
        console.log(error);
      },
    });
  }

  return (
    <main>
      <button className="btn btn-primary mt-20" onClick={startMeeting}>
        Join Meeting
      </button>
    </main>
  );
}

export default Zoom;

I have tried various methods to resolve the conflict, such as adjusting the order of CSS imports, using scoped styles, and applying additional specificity to my CSS rules, but the issue persists.

I would appreciate your guidance on how to best approach resolving this issue. Are there any known methods or best practices for preventing the Zoom Meetings SDK from overriding my app’s CSS? Is there a specific configuration or workaround I should be aware of?

Thank you for your time and assistance. I look forward to your prompt response and any advice you can offer.

2

Hi @amabrouk are you using Material UI for your app?

You can prefix your CSS classnames with a keyword like my-app with Material UI to avoid collisions with the SDK (Reference).

Docs here: API - Material-UI

const generateClassName = createGenerateClassName({
  seed: 'my-app-'
});

...

 <ThemeProvider>
      <StylesProvider generateClassName={generateClassName}>
...
</TheamProvider>

Let me know if this helps.

3

what?

do you really think this is the best solution?

it’s clearly a problem with the css injected by zoom.

here’s an example that’s causing me a lot of trouble.

// zoom-meetingsdk.css

.hidden {
    display: none !important;
    visibility: hidden !important;
}

I haven’t been able to solve it yet and I haven’t found anyone who has. The way zoom does this needs to change! Just put the id of the parent element that is used