How to use grid-template-areas in react inline style?

Just use backtick strings.

gridTemplateAreas: `
                    'header header'
                    'aside main'
                    'footer footer'
                `

if you need an object in style, this works

    myStyle = {
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    };

and use the style object inline

like I did using styletron

    import { styled } from 'styletron-react';

    const myStyle = {
        backgroundColor: 'whitesmoke',
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px'
    };

    const Layout = styled('div', (props) => (myStyle));

    export default Layout;