Ich habe ein Designsystem, das in React- und CSS-Modulen geschrieben ist. Die Einheiten für Abstände, Schriftarten, Elementgrößen usw. sind alle in rem geschrieben (setzen Sie den Basiswert auf 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;
  ...
}

Das Problem ist, dass in dem Projekt, das ich in das Designsystem importieren möchte, überall rem verwendet wird und der Stammwert bereits auf 10px gesetzt ist.

Dadurch werden alle aus dem Design-Systempaket importierten Komponenten verkleinert.

Gibt es eine Möglichkeit, für bestimmte Bereiche separate Stammschriftgrößen festzulegen? Oder eine Möglichkeit, zwei Elemente auszurichten, ohne den gesamten Abstand neu zu schreiben?

Ich habe versucht, sie zu verwenden, hatte aber große Probleme