Conditionally formatting a text box in Modern UI

I recently had the need to style a textbox in Modern UI based on the value of another field.

Acumatica provides an example for styling grid rows here, but the GetRowCss / GetCellCss events do not seem to work for regular form fields. Not knowing TypeScript / JavaScript better, I spent some time trying different ways of doing this, but ended up with this fairly basic HTML block in a screen extension:

<template>
    <style>
        [data-rating="green"] input {
            background-color: #155724 !important;
        }
        [data-rating="yellow"] input {
            background-color: #856404 !important;
        }
        [data-rating="red"] input {
            background-color: #721c24 !important;
        }
    </style>
    <field append="#fsHeader_C" name="UsrDXCommissionRating" 
        data-rating.bind="Quote.UsrDXGrossProfitPct.value >= 45 ? 'green' : Quote.UsrDXGrossProfitPct.value >= 40 ? 'yellow' : 'red'"></field>
</template>

(this styles the ‘UsrDXCommissionRating’ field conditionally, based on the value of ‘UsrDXGrossProfitPct’)