Search code examples
cssreactjsinline-styles

Using grid-template-columns in ReactJS, inline style

Im trying to use the CSS grid in a React component, but I get an error in the first dash of grid-template-columns, any ideas why this happens?

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

  • From the docs,

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

    In React, inline style uses camelCase name for CSS properties without -, like

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