Migrate CSS
Lightning web components use standard CSS syntax. Remove the proprietary THIS class that Aura components use.
Here's a CSS file for an Aura component.
The CSS file for the migrated Lightning web component is identical except for the removal of THIS.
Migrating the CSS file is currently not supported across all base components. Let’s say you are migrating the following lightning:button Aura markup.
The lightning:button uses the following CSS selectors.
When you use the lightning-button Lightning web component, the custom classes are applied to the outer elements of the lightning-button component, which means that the following lightning-button markup doesn’t display the expected styling.
Your custom CSS is automatically scoped to your own component to prevent styling of a base component’s internals. We recommend that you use Lightning Design System classes or the variants on a base Lightning component where possible.
In this case, we recommend that you use the variant attribute on lightning-button. For example, use the destructive variant to make the background color red.
Let’s take a look at another example where migrating CSS can work for a base component. For example, you have the following lightning:formattedAddress markup.
The component uses the following CSS selectors.
Use the class attribute to apply the custom styling.
See Also