Fluentui: Typescript error in IStyleFunction after upgrade

[saicharanp]

I recently upgraded office-fabric-react-ui and  @uifabric/merge-styles  to latest version and I am getting a typescript error in the IStyleFucntion

import { IStyleFunction } from '@uifabric/merge-styles/lib';
import { IButtonStyles } from 'office-ui-fabric-react';
getStyles?: IStyleFunction<ITreeListSearchStyleProps, ITreeListSearchStyles>;

export interface ITreeListSearchStyles {
  root?: IStyle;
  header?: IStyle;
  headingLabel?: IButtonStyles;
}

Type IButtonStyles is not assignable to type IStyle​​​​​​​.

It was working fine previously in version 5.132.0.  

I tried updating typescript and it didn't work. I need to cast headingLabel or ITreeListSearchStyles to any to make it work and it defeats the purpose of typescript.

[micahgodbolt]

Are you saying you upgraded to 6.x? Or did you upgrade to the latest version of the 5.x branch?

[saicharanp]

Are you saying you upgraded to 6.x? Or did you upgrade to the latest version of the 5.x branch?

I upgraded to 6.109.0 from 5.132.0. It was working fine in 5.132.0

[micahgodbolt]

Ah....I believe the change is that you'll need to use subComponentStyles for this

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#icomponentstyles

I believe this was to fix a bug in which those button styles weren't actually working correctly.

[saicharanp]

Ah....I believe the change is that you'll need to use subComponentStyles for this

https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#icomponentstyles

I believe this was to fix a bug in which those button styles weren't actually working correctly.

Thanks for the reply.
Can you please tell me how do I refactor this? I tried the following and it is not working:

export interface ITreeListSearchStyles {
  root?: IStyle;
  header?: IStyle;
subComponentStyles: {
   headingLabel?: IButtonStyles; 
  }
}

[micahgodbolt]

Would it be possible to mock this up in a codesandbox? Without seeing the code and the errors its hard to know what might be wrong. You'll need to update your styles to match this new interface.

root: {background: 'blue'},
header: {...},
subComponentStyles: {
  headingLabel: {
    root: {...}
  }
}

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!