Override Component Branding in LWR Sites with Custom CSS

Occasionally, styling hooks are insufficient to style a component exactly the way you want. In this situation, you can use CSS selectors to target and style preapproved “parts” within a component.

Use custom CSS sparingly and avoid targeting DOM elements without a part attribute. Doing so is brittle because changes to the component’s internal DOM structure is likely to break hard-coded CSS selectors. Additionally, Salesforce Customer Support can’t help resolve any issues with custom CSS.

Warning

Target Component Instances

Every component has a data-component-id attribute with a unique value per component instance. Using this value, you can easily target the component instance and override styling hooks or add new CSS altogether.

To determine the exact attribute value of a component, inspect the DOM of your app—for example, with Chrome DevTools.

Let’s say a section on the page has the HTML markup <community_layout-section data-component-id="section-adfb">. This code sample uses the value to override the component’s default styling.

1<style>
2  [data-component-id="section-adfb"] {
3    --dxp-g-warning: #ff9966;
4    --dxp-g-warning-contrast: #fff;
5    border: 2px dashed #000;
6  }
7</style>

You can also specify a custom CSS class on a component’s property panel to target that component.

Style tab showing the Custom CSS section

Target Parts Within a Component

Most components are made up of many DOM elements, which means that you can style a specific element or part within a component. Component parts are exposed by DXP with the following format:

1<div part="dxp-[component]-[part]">Some element</div>

You can expose parts from your custom components using the same format. For example, a custom hero component could look like this:

1<template>
2  <div class="hero-background">
3    <h1>My hero text</h1>
4    <button part="some-partner-hero-primary-button">Main button</button>
5    <button part="some-partner-secondary-button">Secondary button</button>
6  </div>
7</template>

And you can target either button with a CSS attribute selector, as follows:

1<style>
2  [part="some-partner-hero-primary-button"] {
3    --dxp-g-brand: red;
4    --dxp-g-brand-contrast: white;
5    transition: background-color 2s ease-in;
6  }
7</style>

In the previous code sample, you would avoid targeting the h1 or hero-background class because they don’t have a defined part.

Note

If you want to target a part within a specific component instance, you can combine the part selector with a data-component-id selector, as follows:

1<style>
2  [data-component-id="custom-hero-cd0b"] [part="some-partner-hero-primary-button"] {
3    --dxp-g-brand: red;
4    --dxp-g-brand-contrast: white;
5    transition: background-color 2s ease-in;
6  }
7</style>