I am trying to change the background colour of a lightning tile when user clicks a button. I am not sure if this can be done via CSS? Any leads on what would be the best approach to solve this?

1 Answer 1


Yes, this can be done, as tiles do not already have a background.

Here's an example that works in LWC:

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  styleName = "default";
  changeStyle() {
    this.styleName = "whitebackground";

    <lightning-tile label="Demo" class={styleName}>
    <lightning-button label="Change!" onclick={changeStyle}>

.default {
  background-color: lightblue;
.whitebackground {
  background-color: white;
  • works like a charm! thanks a lot!
    – Satish
    Oct 29, 2020 at 0:07

You must log in to answer this question.

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