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

Question

我正在尝试在React组件中使用CSS网格，但是当我使用grid-template-columns的第一个破折号时会出现错误，您有什么想法为什么会出现这种情况吗？

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

- Tapioca

Answer 1

从文档中获得的信息：

样式属性接受一个JavaScript对象，该对象使用camelCase属性而不是CSS字符串。

在React中，内联样式使用camelCase名称表示CSS属性，不需要使用- 符号，例如：

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

- ravibagul91