Library

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

System Info

N/A

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/romantic-fog-6tgkxz

Bug Description

The current implementation of ToolbarDivider doesn't allow the customer to override the default styles. The problem is that currently the styles are merged in this order:

state.root.className = mergeClasses(
    state.root.className,
    toolbarDividerStyles.root,
    !vertical && toolbarDividerStyles.vertical,
  );

resulting in any customization being overriden by default styles.

Actual Behavior

ToolbarDivider default styles cannot be overriden.

Expected Behavior

ToolbarDivider styles can be overriden.

Logs

No response

Requested priority

High

Products/sites affected

N/A

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.