Chrome扩展Shadow DOM中如何让JoyUI固定用16px标准字体？

核心方案：使用JoyUI主题的htmlFontSize配置 #

JoyUI和MUI共享主题系统核心逻辑，支持通过自定义主题设置htmlFontSize来强制基准字体大小，完全隔离外部页面的影响：

import { extendTheme } from '@mui/joy/styles';
import { CssVarsProvider } from '@mui/joy/styles';
import App from './App';

// 自定义主题，强制基准字体为16px
const theme = extendTheme({
  typography: {
    htmlFontSize: 16,
  },
});

// 用CssVarsProvider包裹应用
function Root() {
  return (
    <CssVarsProvider theme={theme}>
      <App />
    </CssVarsProvider>
  );
}

export default Root;

双重保障：Shadow DOM宿主元素显式设置字体大小 #

如果主题配置后仍有个别样式受影响，可以在Shadow DOM的宿主元素上显式设置字体大小，彻底切断外部继承：

/* 在Shadow DOM的内部样式表中添加 */
:host {
  font-size: 16px !important;
}

原理说明 #

JoyUI的CSS变量和样式计算会基于主题中htmlFontSize的值转换rem单位，无论外部页面的<html>元素设置了多大的字体，内部UI的尺寸都会以你指定的16px为基准计算，完美解决Shadow DOM中rem继承外部根元素的问题。

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