[Feature]: Support custom style hook "inheritance"

[spmonahan]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

I want nested FluentProviders to be able to inherit their parent FluentProviders' custom style hooks.

For example:

const outerCustomStyles = {
  useButtonStyles: (state: ButtonState) => {
    state.root.className = mergeClasses(state.root.className, "color: pink, border: red");
  }
};

const innerCustomStyles = {
  useButtonStyles: (state: ButtonState) => {
    state.root.className = mergeClasses(state.root.className, "border: blue");
  }
};

<FluentProvider customStyleHooks={outerCustomStyles}>
  <Button>With pink text and a red border</Button>
   <FluentProvider customStyleHooks={innerCustomStyles} inheritParentCustomStyles>
      <Button>With pink text and a blue border</Button>
   </FluentProvider>
</FluentProvider>

Live example (note this shows the current "issue", i.e., it doesn't work as requested)

Have you discussed this feature with our team

@micahgodbolt

Additional context

Today style inheritance doesn't work as requested but nested FluentProviders do inherit customizations so long as they themselves do not add futher customization. So if the parent customizes Button and the child does not, all the parent customizations will render in the child. If the child customizes Button as well none of the parent customizations will render in the child.

This creates a somewhat strange state of affairs in that "inheritance" seems to work in some cases and then not at all in others which is likely to be confusing to users.

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Priority

Normal

[microsoft-github-policy-service]

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

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