Our in-house design system, called Forge, implements many CSS selectors that control the styles in our UI. When the Zoom Component View is embedded into this UI, some of the Forge selectors are taking precedence over Zoom’s and thereby interfering with the Component View UI. One example is the font color is gray when it should be white. The main purpose of Component View is to embed into a pre-existing UI including any combination of HTML and CSS styling. Zoom’s CSS styling should be durable and not subject to being overridden by the host page’s existing stylesheets unintentionally.
The fix for this is simple:
- Add a class prefix to all Zoom CSS Selectors, ie
.css-1izjf94 .zoom-MuiButton-startIcon"
will become:
.zoom .css-1izjf94 .zoom-MuiButton-startIcon
- For each zoom related parent node inserted into the DOM(main video, settings, chat, participant list, etc), assign the class prefix to it: