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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.