Change the background colour of a Lightning tile upon Button Click

Question

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?

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";
  }
}

---

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

---

.default {
  background-color: lightblue;
}
.whitebackground {
  background-color: white;
}