React开发的Widget嵌入第三方站点字体过小 无法覆盖全局CSS

你设置的样式不生效主要有两个核心原因：

• 样式语法错误：你写的font-size: 100% important;是无效写法，正确的高优先级声明格式是font-size: 100% !important;，感叹号缺失会导致整条规则被浏览器直接忽略。
• 单位匹配问题：如果你的Widget内部用rem作为尺寸单位，那在外层wrapper上设置font-size完全不会生效——rem是永远绑定<html>根元素的font-size计算的，父容器的font-size只能影响em、百分比这类相对父级计算的单位，对rem没有任何作用。第三方站点把html的font-size设为62.5%，本质是把默认16px的根字体改成了10px，如果你是按16px基准开发的组件，所有用rem的尺寸都会等比缩小到原大小的62.5%。

按改造成本从低到高排序，可按需选择：

方案1：固定外层容器字体，内部相对单位改用em #

这是改动最小的方案，不需要重构渲染逻辑：

1. 给Widget最外层容器设置固定像素的字体大小，不要用百分比（百分比会沿父级链继承，容易被其他层级的样式影响）：

   #wrapper {
     font-size: 16px !important;
   }
   

2. 把组件内部所有原来用rem定义的字体、间距、宽高等样式，全部替换为em单位。em的计算基准是当前元素继承到的font-size，外层固定16px后，内部1em就等于16px，和你本地开发的基准完全一致，不会再受第三方站点根字体设置的影响。
3. 如果组件嵌套层级多、担心内部单独设置font-size导致em计算基准混乱，可以配合CSS变量统一管控：

   #wrapper {
     --widget-base: 16px;
     font-size: var(--widget-base) !important;
   }
   /* 内部元素写法示例，14px字体、20px下外边距 */
   .content {
     font-size: calc(14 / 16 * 1em);
     margin-bottom: calc(20 / 16 * 1em);
   }
   

方案2：使用Shadow DOM做完全样式隔离 #

如果希望彻底避免第三方站点的所有样式污染（不止字体问题，还包括全局标签重置、类名冲突等），可以把Widget渲染到Shadow DOM中，这是第三方嵌入场景最稳妥的方案：

import { useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';

export default function WidgetEntry() {
  const hostRef = useRef(null);
  const rootInstance = useRef(null);

  useEffect(() => {
    if (!hostRef.current || rootInstance.current) return;
    // 创建影子根，开启样式隔离
    const shadowRoot = hostRef.current.attachShadow({ mode: 'open' });
    // 注入影子根内部的全局重置样式
    const resetStyle = document.createElement('style');
    resetStyle.textContent = `
      :host {
        font-size: 16px !important;
      }
      /* 可在这里注入组件的全局样式，或配合打包工具自动把CSS注入到影子根内 */
    `;
    shadowRoot.appendChild(resetStyle);
    // 挂载实际组件内容
    const mountNode = document.createElement('div');
    shadowRoot.appendChild(mountNode);
    rootInstance.current = createRoot(mountNode);
    rootInstance.current.render(<YourWidgetContent />);
  }, []);

  return <div ref={hostRef} id="wrapper"></div>;
}

Shadow DOM内部的样式和外部页面完全隔离，你可以在内部自由设置根字体、默认样式，不会影响第三方页面，也不会被第三方页面的样式影响。

方案3：全部尺寸改用固定px值（不推荐） #

如果Widget样式非常简单，也可以直接把所有字体、宽高、间距的单位都改成固定px，同时给外层wrapper设置font-size: 16px !important;，也能绕过根字体的影响。但这种方案失去了相对缩放能力，后续适配、维护成本很高，只适合非常简单的静态Widget。

• 不要尝试直接修改第三方站点的<html>或body标签样式，会导致站点本身的布局全部错乱，属于严重的侵入性问题。
• 如果你使用了Antd、MUI这类第三方UI组件库，优先查组件库的官方配置，大部分组件库都支持全局修改尺寸单位基准、切换em单位模式，不需要手动逐个替换样式。

内容的提问来源于stack exchange，提问作者MrsPop88