Fluentui: headerClassName isn't applied properly when using mergeStyles

[brandonthomas]

Environment Information

current

Please provide a reproduction of the bug in a codepen:

https://codepen.io/anon/pen/WLyGwP

Actual behavior:

The column header on DetailsList doesn't respect styles passed through the headerClassName property when the class was created with mergeStyles

Expected behavior:

Styles applied through mergeStyles to the headerClassName property work as expected and aren't overrun by default values.

Priorities and help requested:

Are you willing to submit a PR to fix? Yes

Requested priority: Normal

Products/sites affected: M365 Admin Center

[Vitalius1]

Thanks for an issue/PR submission 😄 ! If only all of the issues would come in pairs like that 🙄

[brandonthomas]

Additional Context:
This bug is due to the fact that mergeStyles memoizes not just input but caches results and class names. When it sees a class name that it has already processed it will grab the rules from that and merge them with other styles it sees that aren't just class string names and spit out a single className. This is an issue here because headerClassName isn't passed in last and as a result gets run over by rules that are processed later.

You won't see this bug if you pass in a class name string that is not generated by mergeStyles.

[cliffkoh]

Or specifically, if I were to reword your description a bit, mergeStyles expands class names that it generates and merges individual style properties.

It doesn't do this with non-mergeStyles classnames... simply because it doesn't know what styles those classNames expands into and hence just preserves those literal classnames.

[cliffkoh]

@brandonthomas BTW FWIW, it is more idiomatic to directly pass your custom styles into the styles property of the component in question that you're customizing rather than pass in a class name. We would nevertheless definitely want to pursue the fix you made.

But I notice this property is in DetailsColumn and I'm not sure if the styles property is exposed/reachable (not that intimately familiar with DetailsList myself.. Fabric now supports "subComponentStyles" as a systematic way to resolve this issue but DetailsList was converted before subComponentStyles were a thing). @kenotron would have far more context here as he did the mergeStyles conversion for DetailsList.

[msft-github-bot]

:tada:This issue was addressed in #7554, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[brandonthomas]

@brandonthomas BTW FWIW, it is more idiomatic to directly pass your custom styles into the styles property of the component in question that you're customizing rather than pass in a class name. We would nevertheless definitely want to pursue the fix you made.

But I notice this property is in DetailsColumn and I'm not sure if the styles property is exposed/reachable (not that intimately familiar with DetailsList myself.. Fabric now supports "subComponentStyles" as a systematic way to resolve this issue but DetailsList was converted before subComponentStyles were a thing). @kenotron would have far more context here as he did the mergeStyles conversion for DetailsList.

Forgot to reply to this but looks like there are only four style locations exposed for DetailsList through the styles prop and IColumn doesn't have a styles prop. In our case we need to programmatically set the header style of a specific column based on sorting/filtering rules applied. headerClassNamewas the only option I am aware of to solve this case.