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.
1.THIS .red {
2 background-color: red;
3}
4
5.THIS .blue {
6 background-color: blue;
7}
8
9.THIS .green {
10 background-color: green;
11}The CSS file for the migrated Lightning web component is identical except for the removal of THIS.
1.red {
2 background-color: red;
3}
4
5.blue {
6 background-color: blue;
7}
8
9.green {
10 background-color: green;
11}Migrating the CSS file is currently not supported across all base components. Let’s say you are migrating the following lightning:button Aura markup.
1<lightning:button label="Reset" class="buttonColor buttonText"/>The lightning:button uses the following CSS selectors.
1.THIS .buttonColor {
2 background-color: red;
3}
4
5.THIS .buttonText {
6 color: lightgray;
7}When you use the lightning-button base component, the custom classes are applied to the outer elements of the component, which means that the following lightning-button markup doesn’t display the expected styling.
1<!-- Custom styling does not work here -->
2<lightning-button label="Reset" class="buttonColor buttonText"></lightning-button>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 component where possible.
Note
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.
1<lightning-button label="Reset" variant="destructive"></lightning-button>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.
1<div class="mailingAddress">
2 <lightning:formattedAddress
3 street="1 Market St."
4 city="San Francisco"
5 country="US"
6 province="CA"
7 postalCode="94105"
8 />
9</div>The component uses the following CSS selectors.
1.THIS .mailingAddress a {
2 color: red;
3}Use the class attribute to apply the custom styling.
1<!-- Custom styling works here -->
2<lightning-formatted-address
3 class="mailingAddress"
4 street="121 Spear St."
5 city="San Francisco"
6 country="US"
7 province="CA"
8 postal-code="94105"
9></lightning-formatted-address>1.mailingAddress {
2 color: red;
3}See Also
j