Is there a way to set separate root font sizes for certain locales?

Question

I have a design system written in react and css modules, and the units for spacing, fonts, element sizes, etc. are all written in rem (set the base value to 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;
  ...
}

The problem is that in the project I want to import into the design system, rem is used everywhere and the root value is already set to 10px.

Therefore, all components imported from the design system package will be scaled down.

Is there a way to set separate root font sizes for certain areas? Or a way to align two items without rewriting all the spacing?

I tried using them but had a lot of trouble

Answer 1

Generally speaking, when our interface encounters such problems (such as XAML, but the principle is the same everywhere) to align the graphical interface, we will use margin or Wait for the attributes to be filled inWait...

Don't try to align them one by one. Try to align your UI completely with root