Meeting SDK Type and Version
- SDK Type: Meeting SDK
- Version: 3.5.2
Description
I am integrating the Zoom Meeting SDK into my React.js application to embed Zoom meetings directly into our platform. However, after integrating the SDK following the official documentation, I’ve encountered an issue where my site’s CSS gets overridden by the Meeting SDK’s styles. This issue specifically affects my navigation menu, which disappears as soon as the Meeting SDK is loaded into the application. I’m looking for guidance on how to resolve this conflict and ensure that my application’s styling remains unaffected by the SDK.
The problem primarily lies in the “hidden” class, which exists both in Zoom SDK and in Flowbite. I tried adding a prefix in the Flowbite theme, but the Zoom SDK overrides even tags such as (a, span, ul, li).
Error
No explicit error message, but the navigation menu disappears upon loading the Meeting SDK.
Troubleshooting Routes
- I have followed the basic setup and troubleshooting guides provided in the Zoom SDK documentation.
- Checked for any CSS specificity issues that could be causing the SDK styles to override my custom styles.
- Searched through the Zoom Developer Forum for similar issues but couldn’t find a relevant solution.
Below is the code snippet used for SDK initialization:
const {ZoomMtg} = require('@zoom/meetingsdk');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
Additional Context and Screenshots
- I am using React.js for my application, flowbite/tailwindcss theme.
- The issue occurs right after the Meeting SDK is initialized and loaded into a component.
- Screenshots:
I hope to find a workaround or solution to prevent the Meeting SDK from interfering with my application’s styling, especially to keep the navigation menu visible. Any advice or guidance from the community would be greatly appreciated.