How to overwrite LWC template CSS

Question

I have a LWC component with a table and want to make each row formatted as currency. I know with HTML we can use the format-style="currency" but I think the template is overwriting this styling because it is not working. Is it possible to overwrite with something like !important or another way?

<tr>
   <template for:each={colDATA.SummaryMonths} for:item="month">
      <td format-style="currency" key={month}>
         ${month.Column9}
     </td>
   </template>
</tr>

Answer 1

format-style is an attribute of lightning-formatted-number not of td:

The number formatting style to use. Possible values are decimal, currency, percent, and percent-fixed. This value defaults to decimal.

Indeed you should use that component to format a number as currency:

<tr>
    <template for:each={colDATA.SummaryMonths} for:item="month">
        <td key={month}>
            <lightning-formatted-number value={month.Column9} format-style="currency" currency-code="USD"></lightning-formatted-number>
        </td>
    </template>
</tr>