# Update Lightning Base Components Styling

Lightning base components implement Salesforce Lightning Design System (SLDS) component blueprints and styling. The base components are available as Aura components and Lightning web components (LWC). Only the LWC versions of the base components work in LWR.

For SSR environments, base components can render in native shadow DOM or [light DOM](https://developer.salesforce.com/docs/platform/lwc/guide/create-light-dom.md). Be aware that native shadow blocks global styles from being applied to individual components, which means that your existing styling rules sometimes don’t work as expected anymore. For a list of base components that support SSR, see [Use Supported Lightning Base Components](/docs/platform/lwr/guide/lwr-portable-best-practices.md#use-supported-base-components).

To achieve your styling goals in native shadow, use SLDS styling hooks that are assigned to specific parts of the component with the [`::part` CSS pseudo function](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).

Here’s an example of how you can modify your existing styling rules. Let's say you use SLDS styling hooks to customize the text colors on your buttons.

```css
div.privacy lightning-button {
  --slds-c-button-brand-text-color-active: rgb(255, 255, 255);
  --sds-c-button-text-color: rgb(255, 255, 255);
  --slds-c-button-brand-text-color-hover: rgb(211, 211, 211);
  --sds-c-button-text-color-hover: rgb(211, 211, 211);
}
```

In this example, the values aren’t applied to `lightning-button`. The `lightning-button` component's internals become untargetable because of the native shadow boundary.

The previous example renders the following result:

![Website that renders "got it" button text in blue instead of white.](https://a.sfdcstatic.com/developer-website/sfdocs/lwr-node/media/lbc-shadow-example.png)

In the footer, the **got it** button text renders in blue instead of white.

To fix this styling issue, apply `::part(button)` with the same rules:

```css
div.privacy lightning-button::part(button) {
  --slds-c-button-brand-text-color-active: rgb(255, 255, 255);
  --sds-c-button-text-color: rgb(255, 255, 255);
  --slds-c-button-brand-text-color-hover: rgb(211, 211, 211);
  --sds-c-button-text-color-hover: rgb(211, 211, 211);
}
```

Using `::part(button)` results in the correct styles getting applied to the button.

![Website that correctly renders "got it" button.](https://a.sfdcstatic.com/developer-website/sfdocs/lwr-node/media/lbc-part-example.png)

**See Also**

- Lightning Design System: [Styling Hooks on SLDS Components](https://lightningdesignsystem.com/components/buttons/#Styling-Hooks-Overview)
- Lightning Design System: [Styling Hooks](https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/)