styled-components传props时如何设置样式初始值

报错原因 #

抛Cannot find name 'initial'.ts(2304)的核心原因是语法语境混淆，伴随一个逻辑隐患：

• 语境混淆问题：styled-components模板字符串中，${}包裹的插值部分是TypeScript/JavaScript执行上下文，不是纯CSS文本。原代码中裸写的initial没有加字符串引号，TS会将其识别为待查找的变量/常量，项目中未定义过名为initial的变量，就会抛出找不到名称的错误。
• 逻辑判断隐患：原代码用||做逻辑或判断，当传入top={0}、top=""这类合法假值时，会被误判为未传值，强制 fallback 到initial，不符合业务预期。

正确实现代码 #

首先定义组件接收的Props类型，再修正插值逻辑：

// 定义定位相关props类型，? 表示该属性为可选传入
type PositionProps = {
  top?: string | number
  left?: string | number
  right?: string | number
  bottom?: string | number
}

// 给styled组件绑定泛型类型，TS才能识别props上的自定义属性
const SomeStyledComponent = styled.div<PositionProps>`
  position: absolute;
  // 1. 给initial加引号，作为字符串插值输出为CSS关键字
  // 2. 用*空值合并运算符*??，仅当props.top为null/undefined（即未传入）时才 fallback 到initial
  top: ${(props) => props.top ?? 'initial'} !important;
`

调用效果验证 #

{/* 传入top值，最终渲染样式 top:20px */}
<SomeStyledComponent top="20px" />

{/* 未传入top，最终渲染样式 top:initial */}
<SomeStyledComponent />

{/* 传入0作为值，最终渲染样式 top:0，不会被错误覆盖为initial */}
<SomeStyledComponent top={0} />

内容的提问来源于stack exchange，提问作者A curious student