Reactjs 中的内联样式

Inline styling in Reactjs

我知道这是一个基本问题,已经问过好几次了。我阅读了大部分与 Reactjs 中的内联样式相关的问题和答案。但是找不到我正在搜索的内容,或者我是 Reactjs 的新手,所以我无法理解他们所说的内容。

我知道内联样式可以像下面这样作为一个对象来实现。

<div className="card" style={{ width: 250, height: 50 }}>My card</div>

我很好奇如何使用上面的内联样式添加具有各种值的框阴影。

例子 boxShadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

我知道我可以使用单独的 CSS 文件,但我只想将此框阴影添加到预定义的 bootstrap 卡片中。

我进行了搜索,但找不到合适的答案。只是想知道这是否可行,如果可行,有什么方法可以做到这一点。

谢谢。

只引用他们的话。

<div style={{ 
  boxShadow: "rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px" 
}} >My card</div>