# ZoomMtgEmbedded is overwriting my CSS, solution?

**URL:** <https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629>\
**Category:** Web\
**Created:** [January 13, 2022, 2:45pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629 "2022-01-13T14:45:44Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![loopers410](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@loopers410](https://devforum.zoom.us/u/loopers410)\
**Post date:** [January 13, 2022, 2:45pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/1 "2022-01-13T14:45:44Z")

</div>

**Description**  
Hi, i’m using `ZoomMtgEmbedded from "@zoomus/websdk/embedded"` package.

The problem is that when I join a meeting with this, the CSS of my website behind the zoom window becomes kinda broken and ugly probably because ZoomMtgEmbedded is overwriting the CSS of my entire website, is there a way know every styles it’s overwriting ? So I can reoverwrite everything needed with `!important` in my CSS file

If there are easier solution for this problem rather than overwriting everything, I’ll take it  
I’m using MUI for my website by the way and I guess ZoomMtgEmbedded is using this too by looking at the html generated. If it’s the case, is there a way isolate them ?  
**Which Web Meeting SDK version?**  
2.1.1

**Device :**

- Device: Lenovo
- OS: Fedora 33
- Browser: Chrome

---

<div class="post-metadata">

**Author:** ![loopers410](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@loopers410](https://devforum.zoom.us/u/loopers410)\
**Post date:** [January 20, 2022, 9:56am UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/3 "2022-01-20T09:56:05Z")

</div>

Someone has a solution ?

---

<div class="post-metadata">

**Author:** ![dmartinezbello](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/dmartinezbello/32/34354_2.png) [@dmartinezbello](https://devforum.zoom.us/u/dmartinezbello)\
**Post date:** [January 24, 2022, 11:00am UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/4 "2022-01-24T11:00:31Z")

</div>

Someone has a solution? this is urgent for us.

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [February 2, 2022, 12:45am UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/7 "2022-02-02T00:45:34Z")

</div>

@loopers410 @infotainmentLab @s08100-faizatish6 @dmartinezbello

Are the styles overridden when you import the package or when you make the call to zoommtg.join()?

Using the [Sample Web App](https://github.com/zoom/sample-app-web) as a guide, where are you adding the styles? I just want to reproduce the issue on my end so that I have a good understanding of the root cause.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![loopers410](https://avatars.discourse-cdn.com/v4/letter/l/f04885/32.png) [@loopers410](https://devforum.zoom.us/u/loopers410)\
**Post date:** [February 4, 2022, 3:57pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/8 "2022-02-04T15:57:03Z")

</div>

After doing

```javascript
const client = ZoomMtgEmbedded.createClient();
....
client.init({
...
})
client.join({ <<------// The styles are overriden at the moment i call join
...
})

```

Most of my styles are done with MUI but since I’m working for my company I can’t know exactly where is my style added because the project I have has too much files

Instead can you try to make an example of code where you use MUI and ZoomMtgComponent where the MUI’s style is not overridden ? I think this will help a lot !

---

<div class="post-metadata">

**Author:** ![mikew](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/mikew/32/35079_2.png) [@mikew](https://devforum.zoom.us/u/mikew)\
**Post date:** [February 11, 2022, 5:01pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/9 "2022-02-11T17:01:57Z")

</div>

I’m experiencing this as well. I think the issue is that there doesn’t seem to be an easy way to apply styling to the embedded video. I was able to disable dragging in the latest version using the new configuration, but I would like to be able to resize it. Currently it does not fill the window of it’s parent which I would expect to be the default behavior.

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [March 18, 2022, 1:35pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/11 "2022-03-18T13:35:46Z")

</div>

Hi,

Thank you for posting, @surveyfor! Can you share more details about what you are looking to accomplish and what you have tried? An example screenshot of the UI along with a code snippet would help diagnose what may be happening.

Thanks,  
Donte

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 17, 2022, 11:36pm UTC](https://devforum.zoom.us/t/zoommtgembedded-is-overwriting-my-css-solution/62629/12 "2022-04-17T23:36:20Z")

</div>

Closed on April 17, 2022, 11:36pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.