TSX内联样式短横线命名报错：padding-top不兼容Properties类型

在TSX的内联样式中，不能直接使用带短横线的CSS属性名，比如"padding-top"、"background-color"这类写法会触发TypeScript的类型检查错误——因为React的内联样式对象要求属性采用驼峰式命名，TypeScript的Properties类型只识别驼峰格式的属性名。

错误示例 #

<ModalHeading id="modal-1-heading" style={{"padding-top":"0px"}}>Mailing Address</ModalHeading>

正确写法 #

把带短横线的属性名转换为驼峰式即可：

<ModalHeading id="modal-1-heading" style={{paddingTop:"0px"}}>Mailing Address</ModalHeading>

通用转换规则 #

所有带短横线的CSS属性都要改成驼峰格式：

• background-color → backgroundColor
• font-size → fontSize
• border-radius → borderRadius
• margin-left → marginLeft

修改后TypeScript的类型检查就能通过，样式也能正常生效。

内容的提问来源于stack exchange，提问作者gene b.