将 OOTB 样式应用于扩展组件

在 AEM 的组件开发中，通常会对原始组件进行扩展以满足自定义需求。但是，扩展组件的样式可能会与 AEM OOTB 样式不兼容。为了解决这个问题，可以使用以下步骤将 AEM OOTB 样式应用于扩展组件：

1. 将 AEM OOTB 样式导入扩展组件的 LESS 文件中：

@import "core.wcm.components.page/v1/page/clientlibs/site.less";

2. 在扩展组件定义的 LESS 文件中使用 AEM OOTB 样式，如下所示：

.my-extended-component {
  .cmp-page {
    .cmp-page__title {
      // Apply OOTB background color to the title
      background-color: var(--cmp-page__title--background-color);
    }
  }
}

这是一个简单的示例，采用嵌套选择器（nested selector）的方式将 AEM OOTB 样式应用于扩展组件。通过此方法，可以利用 AEM OOTB 样式库中的任何样式，并应用于扩展组件。

上述代码示例假定扩展组件已经继承了 AEM OOTB 原始组件编写代码的结构。如果扩展组件没有这些代码结构，需要使用其他方法将 AEM OOTB 样式应用于扩展组件。

总之，将 AEM OOTB 样式应用于扩展组件，可以提高组件的风格一致性和开发效率。