Cannot update the FluentFlipper button styling when using the FluentHorizontalScroll Blazor component

[seanmullanmt]

I'm using the FluentHorizontalScroll component which works very well for what I need it for, but the issue is that this component uses another component FluentFlipper (scroll left/right buttons).

I cannot seem to access any .css styling to update these buttons, because they are nested in the FluentHorizontalScroll component. However, if I create these components individually I can update the styling.

I've tried updating the .css which works for individual component, but not the component within the FluentHorizontalScroll.

Could anyone guide me on how I can update the child components styles?

Thanks.

[vnbaaij]

You'll need to do something with Blazor's ::deep selector to find the flippers inside the horizontal scroll (see https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation). Once you have them, you probably need to work with :part to find the elements you want too style in the shadow dom.

[seanmullanmt]

Thank you for your feedback. I'm using css isolation and it seems to work fine, I can access the fluent-horizontal-scroll, but I'm having trouble with accessing the flippers. Could you give me an example of using :part? Do I have to access each element until I reach the flipper?

[seanmullanmt]

I'm able to get as far down to scroll-action-previous to update the styles with this following css

::deep ::part(scroll-action-previous) { height: 100px; }

Do you have a method of getting to the fluent-flipper element?