CODEWITHSUNDEEP
stylingspartacus-storefront
Erik Slagter
Erik Slagter

Reputation: 239

Applying OOTB styles to extended component

I have to extend the OrderOverviewComponent, but when I create a new component that extends the component, the styling is no longer applied because Spartacus is not styling on class name but on 'placeholder class'

I looked at the css-architecture documentation, but the examples like this is not working.

cx-link {
  @extend %cx-link !optional;
  a {
    color: red;
  }
}

How I can @extend my new component, and apply OOTB styling?


lib-xxx-order-review {
  background-color: red;

  @extend %cx-order-overview !optional;
}

Upvotes: 2

Views: 334

Answers (2)

L Tiger
L Tiger

Reputation: 581

The reason why this might not work is because you need to have the import of the Spartacus file you are extending in your custom style file.

You have two options for extending the Spartacus styles:

  1. Extending the OOTB style in your styles.scss and defining your custom styles in the component style
// styles.scss
$styleVersion: 3.4;
@import "~@spartacus/styles/index";

app-custom-product-intro {
  @extend %cx-product-intro !optional;
}

// custom-product-intro.component.ts
:host {
  .code {
    color: yellow;
  }
}

The following example will use the OOTB style and override the .code color.

  1. Extend the style in your component scss
// custom-product-intro.component.ts

// Import required by the OOTB file
@import "~@spartacus/styles/scss/cxbase/mixins";
// Import the OOTB component style before importing it
@import "~@spartacus/styles/scss/components/product/details/product-intro";

:host {
  .code {
    color: yellow;
  }
  @extend %cx-product-intro !optional;
}

We will update the documentation to add above details.

Upvotes: 2

James Garzón otálvaro
James Garzón otálvaro

Reputation: 76

Check if you are importing styles with @import.

@use do not work for extending OOTB component placeholder

Upvotes: 1

Related Questions