在ReactJS中使用grid-template-columns,内联样式

Tap*_*oca 3 css inline-styles reactjs

CSS我尝试在组件中使用网格React,但在第一个破折号中出现错误grid-template-columns,有什么想法为什么会发生这种情况吗?

<div style={{display:'grid', grid-template-columns: '1fr 1fr'}}>
Run Code Online (Sandbox Code Playgroud)

rav*_*l91 9

文档中,

style 属性接受具有驼峰命名属性的 JavaScript 对象,而不是 CSS 字符串。

在 中React,内联样式使用不带 , 的属性camelCase名称,例如CSS-

<div style={{display:'grid', gridTemplateColumns: '1fr 1fr'}}>
Run Code Online (Sandbox Code Playgroud)