CSS网格可以用在电子上的JSX内联样式吗？

Question

所以我正在创建一个Electron应用程序，允许用户创建发票，然后生成该发票的PDF。我正在使用PDF npm包，允许我传入HTML。所以我使用JSX动态创建发票然后我将JSX转换为HTML字符串。因为我这样做我不能使用典型的CSS文件来设置样式。所以我需要使用JSX的内联样式。但由于某种原因，我无法使用CSS网格。我做错了什么。我已经尝试过研究它，并且无法找到关于我正在尝试做什么的任何好的信息。

let headerStyle = {
        display: 'grid',
        gridTemplateColumns: '3fr 1fr',
        gridTemplateRows: 'auto auto',
    }

    let invoiceHeaderInfoStyle = {
        gridColumn: '2 / 3',
        gridRow: '1 / 2'
    }

    let invoiceHeaderCompanyInfoStyle = {
        gridColumn: '1 / 2',
        gridRow: '1 / 2'
    }

    let invoiceHeaderClientInfoStyle = {
        gridColumnStart: '1',
        gridColumnEnd: '2',
        gridRow: '2 / 3'
    }

    return (<div>
        <header style={headerStyle}>
            <h1>Invoice</h1>
            <section style={invoiceHeaderInfoStyle}>
                <div className="invoiceHeaderInfoDetails">
                    <span>Invoice #:</span>
                    <span>{invoice.number}</span>
                </div>
                <div className="invoiceHeaderInfoDetails">
                    <span>Date:</span>
                    <span>{invoice.date}</span>
                </div>
            </section>
            <section style={invoiceHeaderCompanyInfoStyle}>
                <div><p>Company Name</p></div>
                <div><p>Some City, KS</p></div>
                <div><p>(555)555-5555</p></div>
                <div><p>companyname@email.com</p></div>
            </section>
            <section style={invoiceHeaderClientInfoStyle}>
                <div>{this.getFormattedAddressHeader()}</div>
            </section>
        </header>
    </div>)