React JSX 无法在图像的样式属性中识别适合对象

Question

我使用的是 bootstrap 卡片，我需要将卡片中的所有图像设置为相同大小。虽然有多种方法可以达到相同的目的，但我使用这种样式来达到相同的目的。

查看下方图片样式

<div className="card " style={{width: "18rem"}}>
    <img src={imageUrl} className="card-img-top" style={{width: "100%", height: "40vh", object-fit: 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>

但是我收到错误

SyntaxError: C:\Users\hpoddar\Desktop\WebDev\ReactComplete\newsapp\src\components\NewsItem.js: Unexpected token, expected "," (10:110)

如果我删除 object-fit 属性，一切正常且符合预期。波浪线消失了。

我该如何解决？

Bootstrap version : 5.1
react: 17.0.2
react-dom: 17.0.2
react-scripts: 4.0.3
web-vitals: 1.1.2

编辑：我有这个疑问为什么object-fit被用作objectFit，Andrew在评论中回答了这个问题。

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax:

Answer 1

我认为 object-fit: contain 不适合 JSX。尝试 objectFit: 'contain'

React JSX 无法在图像的样式属性中识别适合对象

React JSX does not identify object-fit in style attribute for image

css

jsx

twitter-bootstrap

reactjs

bootstrap-5