` appended to `body` with the use of this sdk. As you’ve mentioned, the sdk will at least be properly attached to another div with the id. I suspect this is due to the depth first nature of `querySelector` or `getElementById`. You can visually “clean up” the other `div` with ```auto body > #zmmtg-root { display: none; } ``` ---

**Author:** ![sdenardi](https://avatars.discourse-cdn.com/v4/letter/s/58f4c7/32.png) [@sdenardi](https://devforum.zoom.us/u/sdenardi)\ **Post date:** [September 17, 2019, 10:54pm UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/17 "2019-09-17T22:54:23Z")

@edward That’s my current workaround, and yeah the fact that it does attach to the `div` we create is just a fortunate side-effect of the library. ---

**Author:** ![michael.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/michael.zoom/32/37213_2.png) [@michael.zoom](https://devforum.zoom.us/u/michael.zoom)\ **Post date:** [September 18, 2019, 3:22pm UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/18 "2019-09-18T15:22:35Z")

@edward & @sdenardi - yes, this is currently correct. #zmmtg-root appends into the body on import, and needs to be hidden on load. Hiding it in this way should not influence .init() or .join() from overlaying the page when the meeting starts. Considerations for future readers: If you’re loading another root element (like in React), you’ll need to manage/manipulate the DOM outside of the app. And make sure to include required css files in index.html, not within the app. We’re working on improving support/usage for module importing and SPAs. ---

**Author:** ![New\_Theory](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/new_theory/32/2642_2.png) [@New\_Theory](https://devforum.zoom.us/u/New_Theory)\ **Post date:** [December 19, 2019, 12:35pm UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/20 "2019-12-19T12:35:51Z")

This seems to be working for React: `const zoomMeeting = document.getElementById("zmmtg-root")` `// onClick handlers:` ``` const turnItOn = (e) => { e.preventDefault() zoomMeeting.style.display = 'flex' zoomMeeting.style.height = '100%' zoomMeeting.style.width = '100%' zoomMeeting.style.position = 'fixed' zoomMeeting.style.zIndex = '1' zoomMeeting.style.backgroundColor = 'black' } const turnItOff = (e) => { e.preventDefault() zoomMeeting.style.display = 'none' zoomMeeting.style.height = '0px' zoomMeeting.style.width = '0px' zoomMeeting.style.position = 'relative' zoomMeeting.style.backgroundColor = 'black' zoomMeeting.style.zIndex = '1' } ``` And when the app loads, I set #zmmtg-root “flex: none”, so it doesn’t show on load. One strange behavior I encountered was that in React/Create-React-App, when importing { ZoomMtg } from ‘@zoomus/websdk’ the Zoom inline styles knocked out vertical scrolling everywhere in my app. Fix was to explicitly set global scrolling: ``` html { overflow: scroll; } ``` ---

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\ **Post date:** [December 19, 2019, 8:55pm UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/21 "2019-12-19T20:55:26Z")

Hey @New_Theory, thanks for sharing this! Just letting you know we are working on a fully customizable Web SDK that will not override styles on your app. We are releasing it sometime next year so keep an eye on our [changelog](https://marketplace.zoom.us/docs/changelog). Thanks, Tommy ---

**Author:** ![New\_Theory](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/new_theory/32/2642_2.png) [@New\_Theory](https://devforum.zoom.us/u/New_Theory)\ **Post date:** [December 20, 2019, 8:56am UTC](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281/22 "2019-12-20T08:56:57Z")

Great, thx @tommy! I’ll keep an eye on the changelog. [Next page](https://devforum.zoom.us/t/zoom-meeting-custom-ui/5281.md?page=2)