Javascript 如何在react组件上设置-webkit溢出滚动内联样式

我正在为react组件使用内联样式。它们可以定义如下

const style= {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: '7.5%',
    top: '5.2rem',
    overflowY: 'auto',
  },

它与css有一些不同的语法，比如css中的“overflow-y”应该在内联样式中设置为overflowY。现在我想知道如何在react中将这种样式-webkit溢出滚动设置为内联样式？我尝试过以下设置，但都不起作用

WebkitOverflowScrolling: 'touch',
'-webkit-overflow-scrolling': 'touch',

---

我已经成功地使用了它：

overflowScrolling: "touch",
WebkitOverflowScrolling: "touch",

---

那么

webkitOverflowScrolling

呢？（注意小写字母w）“多字”属性（例如，

font size

等）是用camelCase编写的（如

fontSize

）。作为一项建议，如果您打算使用react进行大量样式设置，我建议使用常规样式表文件，而不是在react中设置样式。JS中的样式还没有出现，您将很难调试重用的样式，您无法轻松复制粘贴css语法，媒体查询是用JS而不是浏览器的css引擎处理的，等等。我不得不在我加入的一个项目中使用它，总体来说，这是一个糟糕的开发体验。我曾尝试将css与react组件分离，但结果证明很难找到dom样式。如果我们在每个组件中放置样式，那么在dom和样式之间导航将非常容易。的确，在这种情况下重用样式是很困难的