如何在JS主题文件中基于根em变量设置灵活间距增量？

需要把CSS中定义的em间距系统迁移到React的Theme.js文件中，通过Theme.spaceXL这类方式在页面内联样式中引用，但之前的写法存在问题，导致间距不生效。

现有Theme.js文件 #

export const Theme = {
  //Primary is accessible on white or beige bckgrnd, others are not //
  primary: "#036c5f",
  secondary: "#f89d3e",
  primaryGreen: "#083D35",
  accentGreen: "#62CDB1",
  midGreen: "#0E6C5F",

  // Background and neutral colours //
  backgroundBeige: "#F6F5F1",
  lightGray: "#eaeaea",
  ultraLightGray: "#fafafa",
  gray: "#d0d3d4",
  charcoalGrey: "#636363",
  darkBlack: "#242627",
  lightBlack: "#2d2f31",

  // Focus State colours //
  focusBlue: "#2C81FF",
  
  borderRadius: "8px",
  borderRadiusElliptic: "32px 0px 32px 0px",
  boxShadow:
    "0 0 0 1px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%), 0 12px 24px rgb(0 0 0 / 5%);",
  boxShadowMedium: "0 8px 30px rgba(0,0,0,.12)",
  border: "1px solid #eaeaea",
  breakpointPhone: "299px",
  breakpointPhoneM: "420px",
  breakpointPhoneL: "620px",
  breakpointTablet: "899px",
  breakpointLaptop: "1024px",
  breakpointLaptopBig: "1224px",
};

export default Theme;

目标CSS参考 #

:root {
    --space-unit: 1em;
    --space-xxs:  calc(0.25 * var(--space-unit));
    --space-xs:   calc(0.5 * var(--space-unit));
    --space-sm:   calc(0.75 * var(--space-unit));
    --space-md:   calc(1.25 * var(--space-unit));
    --space-lg:   calc(2 * var(--space-unit));
    --space-xl:   calc(3.25 * var(--space-unit));
    --space-xxl:  calc(5.25 * var(--space-unit));
}

之前写法的问题 #

之前尝试用CSS变量var(--spaceUnit)生成间距，但React内联样式无法识别未在全局CSS中声明的自定义属性，导致间距不生效：

spaceUnit: "1em",
spaceXS: "calc(0.5 * var(--spaceUnit))",
spaceS: "calc(1 * var(--spaceUnit))",
spaceM: "calc(1.5 * var(--spaceUnit))",
spaceL: "calc(2 * var(--spaceUnit))",
spaceXL: "calc(3.5 * var(--spaceUnit))",

正确实现方案 #

通过JavaScript模板字符串直接生成完整的calc表达式，不需要依赖CSS变量，浏览器可直接解析内联样式中的该表达式。

修改后的Theme.js #

// 先定义基础间距单位，方便后续统一修改
const spaceUnit = "1em";

export const Theme = {
  //Primary is accessible on white or beige bckgrnd, others are not //
  primary: "#036c5f",
  secondary: "#f89d3e",
  primaryGreen: "#083D35",
  accentGreen: "#62CDB1",
  midGreen: "#0E6C5F",

  // Background and neutral colours //
  backgroundBeige: "#F6F5F1",
  lightGray: "#eaeaea",
  ultraLightGray: "#fafafa",
  gray: "#d0d3d4",
  charcoalGrey: "#636363",
  darkBlack: "#242627",
  lightBlack: "#2d2f31",

  // Focus State colours //
  focusBlue: "#2C81FF",
  
  borderRadius: "8px",
  borderRadiusElliptic: "32px 0px 32px 0px",
  boxShadow:
    "0 0 0 1px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%), 0 12px 24px rgb(0 0 0 / 5%);",
  boxShadowMedium: "0 8px 30px rgba(0,0,0,.12)",
  border: "1px solid #eaeaea",
  breakpointPhone: "299px",
  breakpointPhoneM: "420px",
  breakpointPhoneL: "620px",
  breakpointTablet: "899px",
  breakpointLaptop: "1024px",
  breakpointLaptopBig: "1224px",

  // 间距系统
  spaceUnit: spaceUnit,
  spaceXXS: `calc(0.25 * ${spaceUnit})`,
  spaceXS: `calc(0.5 * ${spaceUnit})`,
  spaceSM: `calc(0.75 * ${spaceUnit})`,
  spaceMD: `calc(1.25 * ${spaceUnit})`,
  spaceLG: `calc(2 * ${spaceUnit})`,
  spaceXL: `calc(3.25 * ${spaceUnit})`,
  spaceXXL: `calc(5.25 * ${spaceUnit})`,
};

export default Theme;

页面引用方式（和之前一致即可） #

<div style={{ marginTop: Theme.spaceXL }}>
    <AccordionSection accordionData={accordionTop} />
</div>

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