I have a Repeat component wrapped in a block. The goal is to limit the size of the block to 300 px once the user adds more than 3 instances of the repeat component and show a scrollbar. So I created a Shared Style with the following CSS:
This works fine if I set the shared style at design time and preview; however, what I want to do is have the style applied only when the instance count is greater than 2.
So I added a Dynamic Class rule:
console.log('Number of repeats is ' + data.repeat.length);
if(data.repeat.length>2) return 'showscroll-36529'
However, my class is never applied (I tried many variations for the class naming). I suspect that the shared style is not setup as a CSS class selector but not sure how to proceed.
How can I dynamically apply a shared style to my Block component?
You cannot apply shared styles dynamically. The dynamic class rule needs to return the name of a genuine CSS class that you define yourself.