7

This is what I'am trying to do:

HTML:

<li class="navBar2" style="--lwc-beforeColor: #0ec2df"></li>

.css

.navBar2{
    height:29px;
    background-color: var(--lwc-beforeColor); 
}

But this doesn't work. I wonder if this is not correct way to use var() in css in LWC. Please help.

2 Answers 2

14

you can define custom properties either in components to make them local or load them from StaticResource, if they are not already present on the page.

Salesforce by default loads its' properties in :root, but you can't use :root in LWC components.

So if you want to make property component-specific use something like this.

/* CSS */
:host {
   --bgColor: green;
}
.title {
    background-color: var(--bgColor);
}

If you want to make them global you need to load them from StaticResource

/* Resource.css */
:root {
   --titleFontSize: 16px;
}

// component.js
import { loadStyle } from 'lightning/platformResourceLoader';
import styles from '@salesforce/resourceUrl/Resource';
// ...
connectedCallback() {
  loadStyle(this, styles + 'pathtoStyle.css');
}
// ...

/* component.css */
.title {
    font-size: var(--titleFontSize);
}

UPDATE you can also get/set properties dynamically.

you can get values from apex and/or set them with JS

// controller.js

isFirstRender = true;
renderedCallback() {
  if (!this.isFirstRender) {
     return;
  }
  this.isFirstRender = false;

  document.documentElement.style.setProperty('--titleColor', 'red');
  const customProperty = getComputedStyle(document.documentElement)
    .getPropertyValue('--titleColor');

}
/* component.css */
:host {
  display: block;
  color: var(--titleColor);
}
9
  • In the .css class below: .title { font-size: var(--titleFontSize); } Is there any way we can get value of "--titleFontSize" dynamically from backend(js, apex) not from static resource? Feb 12, 2020 at 10:03
  • 1
    theoretically, you can set/get variables with JS, css-tricks.com/updating-a-css-variable-with-javascript but I never tried it
    – ytiq
    Feb 12, 2020 at 10:11
  • wow, it works. I will update my answer
    – ytiq
    Feb 12, 2020 at 10:18
  • 1
    @Akshay_Matura_SFDC updated my answer
    – ytiq
    Feb 12, 2020 at 10:22
  • Is it enough for you or need something additional?
    – ytiq
    Feb 12, 2020 at 10:44
2

Not my code, forget where I got it from...

Controller:

    titleColor;
    isFirstRender;

    renderedCallback() {
        if (!this.isFirstRender) {
            return;
        }
        this.isFirstRender = false;
        var bodyStyles = document.body.style;
        bodyStyles.setProperty('--titleColor', this.titleColor);
    }
    

CSS:

.control-titleColor {
    background-color: var(--titleColor);
}

HTML:

<...class={control-titleColor}..>
1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .