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>
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! – Rocky Smith Jun 11 '20 at 19:57
  • 1
    yes right....... – salesforce-sas Jun 11 '20 at 20:04
  • 1
    Thank you. We are working with complex customer solutions and will keep Groundswell in mind. – Rocky Smith Jun 11 '20 at 20:16

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.