如何在Styled Component的媒体查询中正确使用Props？

我来帮你解决这个在媒体查询里使用Props时遇到的TypeScript类型报错问题。这个问题的核心是：当你在媒体查询的模板字符串嵌套箭头函数时，TypeScript无法自动推断出函数参数的类型，导致margin被识别为any类型从而报错。下面给你几种可行的解决办法：

方法一：显式标注参数的Props类型 #

最简单的方式就是在媒体查询里的箭头函数中，明确指定参数的类型为你的IBox接口。这样TypeScript就能准确识别参数的类型了：

export const Box = styled.div<IBox>`
  position: relative;
  min-height: 1px;
  ${({ column }) => FlexBasis(column)};
  ${({ display = "flex" }) => Display[display]};
  margin: ${({ margin }) => margin};
  padding: ${({ padding }) => padding};

  ${media.mobile`
    // 这里显式标注参数类型为IBox
    margin: ${({ margin }: IBox) => margin};
  `};
`

方法二：让媒体查询工具支持泛型Props #

如果你的media查询对象是自己封装的，建议把它改成泛型函数，这样它就能自动继承外部Styled Component的Props类型，不需要每次都手动标注：

先修改你的媒体查询工具（假设原来的media是这样封装的）：

import { css, CSSObject, FlattenSimpleInterpolation } from 'styled-components';

// 改成泛型版本，支持接收Props类型
const media = {
  mobile: <P extends object>(
    styles: TemplateStringsArray | ((props: P) => CSSObject | FlattenSimpleInterpolation)
  ) => css`
    @media (max-width: 768px) {
      ${styles}
    }
  `,
  // 其他断点也可以用同样的方式改造
};

改造后，你原来的代码就可以正常使用，不需要额外标注类型了——TypeScript会自动推断出媒体查询里的箭头函数参数类型是IBox。

方法三：抽离媒体查询样式为单独函数 #

如果媒体查询里的样式逻辑比较复杂，或者你想让代码更清晰，可以把这部分逻辑抽成一个单独的函数，明确指定Props类型，然后在媒体查询中引用：

import { css } from 'styled-components';

// 抽离移动端margin样式函数，明确指定参数类型
const getMobileMarginStyles = ({ margin }: IBox) => css`
  margin: ${margin};
`;

export const Box = styled.div<IBox>`
  position: relative;
  min-height: 1px;
  ${({ column }) => FlexBasis(column)};
  ${({ display = "flex" }) => Display[display]};
  margin: ${({ margin }) => margin};
  padding: ${({ padding }) => padding};

  ${media.mobile`
    ${getMobileMarginStyles}
  `};
`

额外注意事项 #

确保你的IBox接口已经正确定义了所有用到的属性，比如margin：

interface IBox {
  column?: number;
  display?: string;
  margin?: string; // 必须包含这个属性，否则TypeScript会报错
  padding?: string;
  // 其他你需要的属性...
}

内容的提问来源于stack exchange，提问作者James Soft