Can CSS Grids be used in JSX Inline styles on Electron? - css

Question

So I am creating an Electron app that allows the user to create an invoice and then produce a PDF of that invoice. I'm using a PDF npm package that allows me to pass in HTML. So I am using JSX to create the invoice dynamically then I am turning that JSX into an HTML string. Because I am doing it like this I cannot use typical css files to set styling. So I need to use JSX's inline styling. But for some reason I can't get it to work with CSS Grids. Am I doing anything wrong. I've tried researching it and can't really find any good information on what I'm trying to do.
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>[phone]</p></div>
<div><p>companyname#email.com</p></div>
</section>
<section style={invoiceHeaderClientInfoStyle}>
<div>{this.getFormattedAddressHeader()}</div>
</section>
</header>
</div>)

Answer 1

I'm sure you figured this out, but for others, you have to include style as JSX object:
import style from './app.css';
export default () => (
...
<div className={style.box}>A</div>
...
It's interesting the element style works in normal way, but references to classes have to be specified as JSX variables.