Styled Components中useMediaQuery函数触发栈溢出问题求助

我在基于Styled Components实现动态组件的灵活样式属性设置函数时，遇到了Module parse failed: Maximum call stack size exceeded错误。该函数用于根据传入的数组配置生成响应式媒体查询样式，在组件中总计被调用25次，所有样式属性的处理逻辑完全一致。

排查过程中确认函数本身没有无限循环逻辑，即使把输入结构从数组改为静态对象，错误依然存在。查阅资料大多指向无限循环问题，但目前未找到对应原因，寻求问题解析与解决指引。

相关代码 #

useMediaQuery函数 #

export const useMediaQuery = (arr: Array<string | number>, name: string) => {
  if (!arr || !name) return;

  const query = new Array<string>();

  for (let i = 0; i < arr.length; i++) {
    query.push(`@media (min-width: ${queryBreakpoints[i === 0 ? 0 : i - 1] ? typeof queryBreakpoints[i === 0 ? 0 : i - 1] === "number" ? `${queryBreakpoints[i === 0 ? 0 : i - 1]}px` : queryBreakpoints[i === 0 ? 0 : i - 1] : `${0}px`}) and (max-width: ${typeof queryBreakpoints[i] === "number" ? `${queryBreakpoints[i]}px` : queryBreakpoints[i]}) {
        ${name}: ${typeof arr[i] === "number" ? `${arr[i]}px` : arr[i] ? arr[i] : "auto"};
    }`);
  }

  query.push(`@media (min-width: ${queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1] ? typeof queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1] === "number" ? `${queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]}px` : queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1] : `${0}px`}) {
        ${name}: ${typeof arr[arr.length === 1 ? 0 : arr.length - 1] === "number" ? `${arr[arr.length === 1 ? 0 : arr.length - 1]}px` : arr[arr.length === 1 ? 0 : arr.length - 1] ? arr[arr.length === 1 ? 0 : arr.length - 1] : "auto"}};`);

  return `& { ${query.join("")} }`;
};

Box组件样式片段 #

${({ w }) => {
    if (typeof w === "object") {
      return useMediaQuery(w, "width");
    } else {
      return `width: ${typeof w === "number" ? `${w}px` : w ? w : "100%"};`;
    }
  }}
  ${({ maxWidth }) => {
    if (typeof maxWidth === "object") {
      return useMediaQuery(maxWidth, "max-width");
    } else {
      return `max-width: ${typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth ? maxWidth : "unset"};`;
    }
  }}
  ${({ h }) => {
    if (typeof h === "object") {
      return useMediaQuery(h, "height");
    } else {
      return `height: ${typeof h === "number" ? `${h}px` : h ? h : "100%"};`;
    }
  }}
  ${({ maxHeight }) => {
    if (typeof maxHeight === "object") {
      return useMediaQuery(maxHeight, "max-height");
    } else {
      return `max-height: ${typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight ? maxHeight : "unset"};`;
    }
  }}

原因解析与解决指引 #

可能原因 #

1. Styled Components解析栈过载：每次调用useMediaQuery都会返回包裹在& { ... }中的媒体查询块，25次调用叠加后，生成的嵌套样式结构过于复杂，导致编译器解析时栈深度超出上限。
2. 复杂字符串拼接的解析负担：函数内大量嵌套的三元表达式在编译阶段被反复解析，累积的计算量触发栈溢出，即使没有运行时无限循环，编译时的递归解析也会出现问题。
3. 缺少样式优化处理：直接返回原始字符串样式，没有利用Styled Components的css辅助函数进行解析优化，导致编译器无法高效处理重复的媒体查询逻辑。

解决办法 #

1. 简化断点处理逻辑：把重复的断点值格式化逻辑抽成独立工具函数，减少嵌套复杂度，降低解析负担：

   const getBreakpointValue = (breakpoint: unknown): string => {
     if (!breakpoint) return '0px';
     return typeof breakpoint === 'number' ? `${breakpoint}px` : String(breakpoint);
   };
   

   替换useMediaQuery中所有嵌套的三元表达式，让代码结构更清晰。

2. 使用css辅助函数优化样式解析：导入Styled Components的css函数包裹返回的样式内容，帮助编译器优化解析过程：

   import { css } from 'styled-components';
   
   export const useMediaQuery = (arr: Array<string | number>, name: string) => {
     if (!arr || !name) return css``;
   
     const query = [];
     const getVal = (val: string | number) => typeof val === 'number' ? `${val}px` : val || 'auto';
   
     for (let i = 0; i < arr.length; i++) {
       const minBreakpoint = getBreakpointValue(queryBreakpoints[i === 0 ? 0 : i - 1]);
       const maxBreakpoint = getBreakpointValue(queryBreakpoints[i]);
       query.push(css`
         @media (min-width: ${minBreakpoint}) and (max-width: ${maxBreakpoint}) {
           ${name}: ${getVal(arr[i])};
         }
       `);
     }
   
     const lastBreakpoint = getBreakpointValue(queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]);
     query.push(css`
       @media (min-width: ${lastBreakpoint}) {
         ${name}: ${getVal(arr[arr.length === 1 ? 0 : arr.length - 1])};
       }
     `);
   
     return css`& { ${query} }`;
   };
   

3. 合并重复的媒体查询：避免每个样式属性单独生成媒体查询，改为接收多个属性的配置对象，一次性生成所有响应式样式，减少&选择器的嵌套次数。

4. 检查queryBreakpoints变量：确认该变量没有循环引用或异常值（比如引用自身的断点），避免解析过程中出现意外的递归处理。

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