将 OOTB 样式应用于扩展组件

Question

我必须扩展 OrderOverviewComponent，但是当我创建一个扩展该组件的新组件时，样式不再应用，因为 Spartacus 的样式不是 class 名称而是 'placeholder class'

我查看了 css 架构文档，但这样的示例不起作用。

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

如何 @extend 我的新组件，并应用 OOTB 样式？


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

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

Answer 1

检查您是否正在使用 @import 导入样式。

@use 不适用于扩展 OOTB 组件占位符

Answer 2

这可能不起作用的原因是因为您需要在自定义样式文件中导入要扩展的 Spartacus 文件。

您有两种扩展斯巴达克斯风格的选择：

在您的 styles.scss 中扩展 OOTB 样式并在组件样式中定义您的自定义样式

// 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;
  }
}

以下示例将使用 OOTB 样式并覆盖 .code 颜色。

扩展组件 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;
}

我们将更新文档以添加上述详细信息。

将 OOTB 样式应用于扩展组件

Applying OOTB styles to extended component

styling

spartacus-storefront