Is there any way to dynamically pass a value to attributes in css fie in lwc?

Question

I'am working on a lightning web component which contains .css file having following class:

.navBar2{
  height:29px;
}
.navBar2:before{
  background: red;
}

Is there any way i can pass dynamic value to background of .navBar2:before? (Binding variable, or any other way to do this)

Answer 1

Another way of applying dynamic styling is using querySelector. A working example is here:- Playground

My html file looks like:-

<template>

    <div data-id="divblock" class="navBar">
        sanket
    </div>

    <lightning-button variant="brand" label="class 1"
     title="Primary action" onclick={handleClick1} 
     class="slds-m-left_x-small"></lightning-button>

     <lightning-button variant="brand" label="class 2"
     title="Primary action" onclick={handleClick2} 
     class="slds-m-left_x-small"></lightning-button>

</template>

A data-id has been defined to div block to query using queySelctor in JS file.There is two button to change the css class whenever it is pressed.

And JS file looks like:-

    handleClick1(){
        console.log(this.template.querySelector('[data-id="divblock"]'));
        if(this.template.querySelector('[data-id="divblock"]')){
            this.template.querySelector('[data-id="divblock"]').className='class1';
        }        
    }
    handleClick2(){
       console.log(this.template.querySelector('[data-id="divblock"]'));
        if(this.template.querySelector('[data-id="divblock"]')){
            this.template.querySelector('[data-id="divblock"]').className='class2';
        }
    }

Once button is clicked, I am accessing the element using querySelector and pass the className from it.

My CSS file looks like:-

.class1 {
    background-color: #e6e618;
}.class2 {
    background-color: #df6e18;
}

Answer 2

You could pass the class name dynamically to the HTML element based on a attribute/property:

MyComponent.html

<div class={navBar}>

MyComponent.js

get tabNavBarClass() { 
    return this.navBar ? 'navBar1' : 'navBar2';
}

MyComponent.css

.navBar2 {
    height:29px;
}
.navBar2:before {
    background: red;
}

.navBar1 {
    height:29px;
}
.navBar1:before {
    background: blue;
}

Answer 3

I don't think you can pass dynamic variables to your style sheet.
You can, however, conditionally set classes in your component.

<aura:attribute name="conditionVariable" type="string"/>
<lightning:layoutItem size="12">
    <div class="{!v.conditionVariable ? 'some-class' : 'some-other-class'}">
        ...

And your style sheet would look like this:

.THIS .some-class{
  background-color: red;
}
.THIS .some-other-class{
  background-color: green;
}