Hello,
I have a component "Three Card Merchandising" that contains other components like "Merchandising Cards" like so:
<div class="cmp-threeCardMerchandising__cards">
<div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>
<div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-two' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>
<div class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-three' @ resourceType='corp-home/components/content/merchandisingCard'}"></div>
</div>
and have configured it to be a container component with "cq:isContainer" like so:
I have added this component to the structure of a template and configured a policy for one of the cards within the component to contains styles.
The style is showing up as expected on a page of this template type:
However the class is not being applied to the HTML when I select the option.
Is it possible to configure styles for nested components? If so, what changes can I make in order to get the style to apply as expected?
Thank you,
Francesca
Solved! Go to Solution.
Team replied:
Unfortunately, I don't believe nested components with the Style system are supported.
This is not documented nor is there any examples of this use case. I am checking with the team on this use case.
Views
Replies
Total Likes
Team replied:
Unfortunately, I don't believe nested components with the Style system are supported.
Okay thank you so much!
Can I document somewhere as a feature request?
Views
Replies
Total Likes
This worked for me :
<sly class="cmp-threeCardMerchandising__merchandisingCard merchandisingCard" data-sly-resource="${'card-one' @ resourceType='corp-home/components/content/merchandisingCard', decorationTagName='div', cssClassName='card-one'}"></sly>
Views
Replies
Total Likes
Your comment should be the accepted solution, you saved my day. I owe to you. Thanks
Views
Replies
Total Likes
From what I've noticed, it looks like the wrapper div is not being generated when including a component. Because of this, the style system cannot add any classes to it. Adding @decoration=true to the data-sly-resource will include the wrapper div (which is important, because otherwise your cq:htmlTag might not be taken into account).
This comment should probably be the "Accepted Solution"
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies