我有一个用react和css模块编写的设计系统，间距、字体、元素大小等的单位都是用rem编写的（将基值设置为16px）

html {
  font-size: 16px;
}

::root {
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  ....
  --h1-font-size: 3.813rem;
  --h2-font-size: 3.063rem;
  --h3-font-size: 2.75rem;
  ...
}

问题是，在我想要导入设计系统的项目中，到处都使用了 rem，并且根基值已经设置为 10px。

因此，从设计系统包导入的所有组件都会按比例缩小。

有没有办法为某些区域设置单独的根字体大小？或者一种在不重写所有间距的情况下对齐两个项目的方法？

我尝试过使用它们，但遇到了很多麻烦