在 ReactJS 中使用网格模板列，内联样式

Question

我试图在 React 组件中使用 CSS 网格，但我在 grid-template-columns 的第一个破折号中遇到错误，知道为什么会这样吗？

<div style={{display:'grid', grid-template-columns: '1fr 1fr'}}>

Answer 1

来自docs,

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

在 React 中，内联样式对 CSS 属性使用 camelCase 名称而不使用 -，例如

<div style={{display:'grid', gridTemplateColumns: '1fr 1fr'}}>

Using grid-template-columns in ReactJS, inline style