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
Migrating the CSS file is currently not supported across all base components. Let’s say you are migrating the following
lightning:button Aura markup.
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
The component uses the following CSS selectors.
class attribute to apply the custom styling.