While making a Lightning Web Component, I am trying to use a JS property in an inline CSS style, but it's more complicated than I thought.

My property looks like this:

get yesVisColorLabel() { return 'background-color: ' + this.label.BCV_Yes_BGColor; }

This is what I have tried in my HTML file so far:

<td style={yesVisColorLabel} key={it2.value.Id}></td>

Error: } expectedcss(css-rcurlyexpected) with the pointer at the first {

<td style={!yesVisColorLabel} key={it2.value.Id}></td>

Error: Invalid expression {!yesVisColorLabel} - LWC1060: Template expression doesn't allow UnaryExpressionlwc

<td style="{!yesVisColorLabel}" key={it2.value.Id}></td>

Error: LWC1034: Ambiguous attribute value style="{!yesVisColorLabel}". If you want to make it a valid identifier you should remove the surrounding quotes style={!yesVisColorLabel}. If you want to make it a string you should escape it style="{!yesVisColorLabel}".lwc

And so I am back at square 2, because I had already tried that one. The errors are given by the Visual Studio editor that uses the LWC extensions.

What is the valid syntax?

  • 1
    The first one is valid (<td style={yesVisColorLabel} key={it2.value.Id}></td>). The VS Code will scream about it but the code will deploy just fine.
    – manjit5190
    Apr 29, 2020 at 14:12
  • @manjit5190 Yes, I ignored the errors and uploaded it. It works! But what is the recommended way to do this? Apr 29, 2020 at 14:16
  • I corrected my previous comment. I am not sure what is recommended way to use dynamic styling but it is recommended to use the classes instead of styles. It would the same way, using getters and VS code will scream about it while linting. If you can suppress the linting warning, it should be okay.
    – manjit5190
    Apr 29, 2020 at 14:21
  • There is an open work item to address the error thrown by VS Code. See github.com/forcedotcom/salesforcedx-vscode/issues/1802 Jul 14, 2020 at 2:09


You must log in to answer this question.

Browse other questions tagged .