Use --dxp Styling Hooks in Custom Components

To build a custom Lightning web component for your site that uses the design system, use the appropriate --dxp styling hooks.

We recommend using --dxp styling hooks to make general changes across the components in your site. But if the --dxp branding defaults don’t provide exactly what you need, you can use --slds-c and --slds-g-color styling hooks to fine-tune the appearance of individual components where necessary.

Tip

This sample shows the code for a custom combobox component.

1<template>
2  <input type="text">
3  <ul>
4    <li>Option 1</li>
5    <li>Option 2</li>
6  </ul>
7</template>

To ensure that the input looks similar to other Lightning base components that also respond to branding changes, the CSS must reference the --dxp styling hooks as follows.

1input {
2  border-color: var(--dxp-g-neutral);
3}
4
5input:focus {
6  border-color: var(--dxp-g-brand);
7}

Values of CSS custom properties are resolved at the time of evaluation. For example, let’s say you have a CSS custom property that references another CSS custom property. If you update the value of the latter CSS custom property in a lower scope, the value of the former CSS custom property doesn’t reflect the new value.

Important

LWR Sites for Experience Cloud

Use --dxp Styling Hooks in Custom Components

See Also