Estoy creando un sitio que puede usar Tiktok oEmbed, hasta ahora todo bien, pero tengo un problema: ¿cómo puedo personalizarlo como si el fondo del cuerpo fuera transparente?

Ya había agregado estilos, MutationObserver para detectar cambios, pero no funciona porque todos mis estilos están sobrescritos por embed.js de Tiktok. ¿Alguien puede ayudarme en este caso? Gracias.

 .feature-frame { padding: 8px; iframe { min-width: initial !important; body { background-color: transparent !important; & * { color: $white !important; } } } blockquote { margin: 0; min-width: initial !important; body { background-color: transparent !important; & * { color: $white !important; } } } }

 const ObserverConfig = { childList: true, attributes: true, subtree: true, }; const ref = useRef(null); function mutationCallback(mutationList: MutationRecord[]) { // Get the iframe from the mutation that has added it const iframeAdded = mutationList.reduce<Node | undefined>((acc, curr) => { const iframe = Array.from(curr.addedNodes).find( (node) => node.nodeName === "IFRAME" ) as HTMLIFrameElement; if (iframe) { acc = iframe; } return acc; }, undefined); if (iframeAdded) { iframeAdded.addEventListener("load", () => { // Do something }); } mutationList.forEach(function (mutation) { // Do something }); } useEffect(() => { /** * MutationObserver: * https://stackoverflow.com/questions/3219758/detect-changes-in-the-dom */ if (!("MutationObserver" in window)){ // Window load } /** * TODO: Check bugs for MutationObserver * https://caniuse.com/#feat=mutationobserver */ const elem = ref.current; const observer = new MutationObserver(mutationCallback); if (elem) { observer.observe(elem!, ObserverConfig); } return () => { observer.disconnect(); }; }, [ref]);