Styled Component CSS文件TypeScript类型声明报错排查

你将ctaPosition声明为object类型，但TypeScript中的object仅表示这是一个对象，不包含任何具体属性的定义。当你尝试访问ctaPosition.top、ctaPosition.height这类属性时，TypeScript无法确认这些属性确实存在于该对象上，因此会抛出属性不存在的错误。

你需要为ctaPosition定义一个精确的类型，明确它包含的属性：

1. 定义可复用的接口/类型别名 #

先声明一个包含所需属性的接口（或类型别名），属性设为可选（因为并非所有位置属性都需要传入）：

interface CTAPosition {
  top?: string;
  left?: string;
  bottom?: string;
  right?: string;
  height?: string;
}

2. 在Styled Component中使用该类型 #

将泛型中的object替换为上面定义的CTAPosition，同时为了处理ctaPosition可能为undefined的情况，使用**可选链（?.）和空值合并运算符（??）**提供默认值：

export const OverlayCTA = styled.div<{
  ctaPosition?: CTAPosition
}>`
  margin: 0.625rem 0 0;
  position: absolute;
  top: ${({ctaPosition}) => ctaPosition?.top ?? 'auto'};
  left: ${({ctaPosition}) => ctaPosition?.left ?? 'auto'};
  bottom:  ${({ctaPosition}) => ctaPosition?.bottom ?? 'auto'};
  right:  ${({ctaPosition}) => ctaPosition?.right ?? 'auto'};
  height: ${({ctaPosition}) => ctaPosition?.height ?? 'auto'};
  @media (min-width: 992px) {
    margin: 3.375rem 0 0;
  }
`;

简化写法（无需单独定义接口） #

如果不需要复用该类型，也可以直接在泛型中内联定义对象类型：

export const OverlayCTA = styled.div<{
  ctaPosition?: {
    top?: string;
    left?: string;
    bottom?: string;
    right?: string;
    height?: string;
  }
}>`
  // 样式代码同上
`;

关键说明 #

• 可选链（?.）：当ctaPosition为undefined时，会直接返回undefined，避免触发"Cannot read property of undefined"的运行时错误。
• 空值合并运算符（?? 'auto'）：当左侧值为undefined或null时，使用右侧的默认CSS值（这里用auto符合CSS默认布局行为）。

内容的提问来源于stack exchange，提问作者Jim Jones