conditional CSS in HTML class tag LWC

Question

very simple but stuck. I used conditional CSS in a js file

get  styleClass(){
 return this.show ? 'class0': 'class1';
    }

In the HTML file, the div class looks like

<div class="slds-box slds-p-left_xxx-small slds-theme_default card"> Now how can i put {styleClass} in div class like
<div class="slds-box slds-p-left_xxx-small slds-theme_default card {styleClass}"> but its not working.What is the best way?

Answer 1

Such conditional CSS is not supported by LWC, you need to include all the CSS in a class property:

<div class={styleClass}>

get styleClass(){
    return `slds-box slds-p-left_xxx-small slds-theme_default card ${this.show ? 'class0': 'class1'}`;
}