Ability to override/merge custom interface with Theme declaration

[jtbandes]

The styled-components library has a nice feature for TypeScript users: declaration merging can be used to change the DefaultTheme type as described here: https://styled-components.com/docs/api#create-a-declarations-file

It would be nice if Fluent also had this feature, so any calls to useTheme() or calls to makeStyles((theme) => ...) would reference the custom Theme type.

This would allow the user to do something like:

declare module "@fluentui/react-theme" {
  export interface Theme {
    fluxCapacitorColor: string; // define a custom slot that will be available across the codebase
  }
}

<ThemeProvider theme={{fluxCapacitorColor: "#abcdef"}} />

<div style={{backgroundColor: useTheme().fluxCapacitorColor}} />

[khmakoto]

Hi @jtbandes, I don't know if we would ever allow declaration merging because that can open a can of wormholes, but I do think that adding extensibility into our Theme would be a good thing to do going forward. We'll keep this in our conversations for the future.

[jtbandes]

Declaration merging is a common approach also used by Emotion and MUI:

emotion-js/emotion#1609

https://mui.com/customization/theming/#custom-variables

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.