I'm building a site that can use Tiktok oEmbed, so far so good but I have a problem that how can I custom style it like the body background is transparent?

I had already added styles, MutationObserver to detect change but it not working because all of my styles are overwritten by the embed.js of Tiktok. Can anybody help me in this case? Thank you.

.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]);