I have fetched the data from apex method using wire adapter to lwc.

js file


i have to set the color to the item value.i have tried this.


<div class="primary-num-text-medium" style="color:itemColor">{item}</div>

it is not working.can someone help?


1 Answer 1


You have a few choices. Option 1 is to set the entire style:

<div style={style}>{item}</div>

Which is set in JavaScript:

this.style = `color: ${data.itemColor}`;

Option 2 is to set a CSS variable:

// css
div.itemColor {
  color: var(--itemColor);


<div style="color: var(--itemColor)">{item}</div>

And assign this class to the element:

<!-- markup -->
<div class="itemColor">{item}</div>

Which you then set in JavaScript on the element (if you used a class):

this.template.querySelector('div.itemColor').style.setProperty('--itemColor', data.itemColor);

Or to the entire component:

this.template.host.style.setProperty('--itemColor', data.itemColor);

In summary, there are lots of ways that you can achieve your effect. The one thing you can't do is the expression syntax from Aura.

  • @TeancyJohn Yes, you can have as many properties as you'd like.
    – sfdcfox
    Jun 20 at 18:03

Not the answer you're looking for? Browse other questions tagged or ask your own question.