CSS 网格可以在 Electron 上的 JSX 内联样式中使用吗？答案

【问题标题】：Can CSS Grids be used in JSX Inline styles on Electron?CSS 网格可以在 Electron 上的 JSX 内联样式中使用吗？
【发布时间】：2018-11-19 03:33:20
【问题描述】：

所以我正在创建一个 Electron 应用程序，该应用程序允许用户创建发票，然后生成该发票的 PDF。我正在使用允许我传入 HTML 的 PDF npm 包。因此，我使用 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>)

【问题讨论】：

不确定，但也许这会有所帮助github.com/electron/electron/issues/4565
谢谢，但不是我要找的东西，因为网格在我的电子应用程序中可以正常工作。只是在我创建 pdf 时不起作用。我可以使用其他 css 属性对其进行样式设置，但是让网格正常工作当然会很可爱:)

标签： css reactjs electron

【解决方案1】：

我相信你已经明白了，但对于其他人，你必须将 style 包含为 JSX 对象：

import style from './app.css';

export default () => (
...

<div className={style.box}>A</div>

...

有趣的是元素样式以正常方式工作，但对类的引用必须指定为 JSX 变量。

【讨论】：