Content management system AEM-将单独的样式应用于组件的编写视图和发布视图

我使用的是Adobe Experience Manager，我需要对组件的“编写”视图和“发布”视图应用不同的样式。原因是我有一些JS可以改变桌面大小的组件布局，但是在创作模式下，这意味着组件不再可用或完全可见

到目前为止，我已经：

• 在Adobe论坛中查找类似的问题

• 尝试根据编辑模式为true的条件在html文件中添加某些样式：

   <sly data-sly-test.author="${wcmmode.edit}"><style><!--my code--></style></sly>
  

---

与基于编辑模式编写内联样式不同，更好的方法是定义一个单独的客户端库，并仅在编辑模式下在页面上添加该客户端库。比如说，您有一个组件——“Custom component”，它的类为“Custom comp”

所以我假设您已经在项目客户端库中为这个组件定义了一些CSS，这些CSS应该已经加载到您的页面上了。要在作者模式下使其风格不同，可以尝试以下步骤-

在您的page.html中，定义一个特殊类，该类将标识您的页面是在Author中加载还是在Publish中加载。像下面这样-

使用上述代码行，您的页面现在只有在Author中打开页面时才会有一个特殊的类“authoring mode”。但当您在publish中打开页面时，该类将不会出现，这正是您想要的

现在，您需要在代码中定义一个新的客户端库，它将包含CSS和JS文件，并且您需要在customheaderlibs中加载这个新的客户端库。同样，只需在作者模式下添加此客户端库

使用两个类名——“编写模式”和组件类名——“自定义组件”的组合为自定义组件编写自定义CSS规则

在作者模式和发布模式下测试您的更改

---

要尝试一下-看起来很有希望！如果这是解决方案，我们将检查并竖起大拇指查看您的答案。感谢you@EmmaEarlKent有一个例子更详细地解释了这个用例。当然@EmmaEarlKent！

<div class="custom-component">
    <!-- your custom component html code goes here -->
</div>