React JSX内联样式不识别object-fit属性报错如何解决

报错原因 #

React 内联样式通过 JavaScript 对象定义，对象属性名不支持短横线分隔的 CSS 原生命名格式，带多单词的 CSS 属性必须转换为驼峰命名法。你代码中写的 object-fit 不符合 JS 对象语法规范，所以会触发语法错误。

修复方法 #

将 img 标签 style 属性内的 object-fit: contain 改为驼峰格式 objectFit: 'contain' 即可，修改后的完整卡片代码如下：

<div className="card " style={{width: "18rem"}}>
    <img src={imageUrl} className="card-img-top" style={{width: "100%", height: "40vh", objectFit: 'contain'}} alt="..."/>
    <div className="card-body">
        <h5 className="card-title">{title}...</h5>
        <p className="card-text">{description}...</p>
        <a href={newsUrl} target="_blank" className="btn btn-sm rounded-pill btn-primary">Read More</a>
    </div>
</div>

延伸说明 #

同类多单词 CSS 属性都遵循该规则，例如：

• background-color 需写为 backgroundColor
• font-size 需写为 fontSize
• text-align 需写为 textAlign

内容的提问来源于stack exchange，提问作者Himanshu Poddar