how to set style of fab-details-list header

[MarcOne68]

Hi, I'm working with fab-defails-list and I would customize the header and the rows passing custom styles (IDetailsHeaderStyles / IDetailsRowStyle) or overriding the default styles. I try to understand the code behind renderDetailsReader and renderRow but I don't understand if it's possibile and how to call the defaultRenderer passing a modified props parameters. Can you help me ? Thanks

[bengry]

It's currently not possible to use the defaultRender part of the IRenderFunction in Angular. We tried to think of ways to enable it in the past, but it would be pretty convoluted and weird*. I'm open for suggestions on how you think that might work, or for any PRs that enable the use of it.

If you only need to customize the styles of any Fabric component, you can always do one of the following:

1. Use contentClass to pass down an ngClass-like input of class names to use on the root element. Note that you'll need to have the class names global (either loaded globally or with ViewEncapsulation.None in the consumer component), since they need to essentially pierce component style encapsulation.
2. [not recommended, though possible] Use contentStyle to pass down an ngStyle-liek input of inline styles to use on the root element.
3. Use Fabric's styles prop (exposed as an Input), and pass down an object of IStyleFunctionOrObject type.
4. (similar to option # 1) use Fabric's exposed class names hooks (.ms-<something>) and style using those.

* Essentially since Angular doesn't have the notion of render props, which is what the defaultRender function is. The closest thing are templates (<ng-template>), but using these means that we need to wrap the defaultRender in a component (that renders it when rendered), wrap that in an <ng-template> (and get it via a TemplateRef, and then inject it into the ComponentRef<> supplied as InputRendererOptions<> for the component to then render using ngContainerOutlet, supplying their own context), I'm not even sure how that would work or look like if the user supplied a straight TemplateRef. Seems like a lot of work and (runtime) overhead for the case where the user may want to use that default render. It's just not as slick as in "React-world". But again, if you have any better suggestions on how that would work - I'm more than happy to hear it out, or accept a PR attempting to tackle this.

[MarcOne68]

Hi Ben, first of all, thank you for the answer.
I've already use the suggested solution at point 3 to pass down a custom IDetailsListStyles, but I don't understand how to (and if is possible) pass down a custom IDetailsHeaderStyles/IDetailsRowStyles using the styles prop of the <fab-details-list> component. I analyzed the definition of the IDetailsListStyles interface but I didn't find any way to pass down the IDetailsHeaderStyles and IDetailsRowStyles.

[bengry]

I'm not too familiar with this specific component in Fabric. Adding @xjerwa who contributed it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.