3

I'll start with a TL;DR Need to pass a value from Experience Builder into CSS. E.g. if someone chooses black on the property type of Color, the value well be passed to a custom CSS class. I have tried the below with no success.

.custom-class { var(--propertyName); }

Really struggling with this one. I need to allow admins to change the color of buttons in a lightning web component that is being used as a community hero via Experience Builder.

All sings are pointing to the need of using an Aura design token, but I have seen a few hints of a recent update of this being supported in LWCs.

My background is in web dev, so I have a solid understanding of the core concept, but how in the world do I get the TargetConfig property type color to show in the Experience builder for the button?

I am passing string values to other pieces of the LWC, so that is working, but I can't figure out how to pass a string or any value to the CSS of the LWC.

Edit: thanks for the markdown edit Brian.

Code

js-meta.xml

<property name="secondaryButtonColor" type="Color" default="rgba(0, 0, 0, 1)" label="Secondary button color"/>

js

@api secondaryButtonColor;

css

.button {
background-color:var(--secondaryButtonColor);
}

html

<a href="#" class="button">Test</a>

1 Answer 1

4

You cannot pass variabled to CSS file from javascript. You have to depend on javascript to apply styles at run time. Below is how you can do it:

HTML:

<button style={btnBackground}>My Btn</button>

JS:

@api
secondaryButtonColor = 'yellow';

get btnBackground() {
    return `background:${this.secondaryButtonColor}`;
}

Whatever you select from app builder for secondaryButtonColor will be passed to change color. Here is the playground example

3
  • Thank you SO much! This is working! I want to be sure that I am understanding the process behind this. Looks like I am creating an inline style element in the HTML that JavaScript is then using a getter to return the property value. Does that sound correct? Man, thanks again! Commented Jun 11, 2020 at 19:57
  • 1
    yes right....... Commented Jun 11, 2020 at 20:04
  • 1
    Thank you. We are working with complex customer solutions and will keep Groundswell in mind. Commented Jun 11, 2020 at 20:16

You must log in to answer this question.

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