[Bug]: Text align is not correct when className and dir are both set in FluentProvider

[wfwf1997]

Library

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

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (20) x64 Intel(R) Core(TM) i9-10900X CPU @ 3.70GHz
    Memory: 25.92 GB / 31.21 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh

Are you reporting Accessibility issue?

no

Reproduction

https://codesandbox.io/s/wonderful-kalam-rgs5jv

Bug Description

Actual Behavior

Text renders starting from the left in a FluentProvider whose dir="rtl" is set together with griffel styling classes.

According to example code in #23821, I've added a TextDirectionProvider with dir="rtl" outside FluentProvider. But nothing changes.

Expected Behavior

Text renders starting from the right in a FluentProvider whose dir="rtl" is set together with griffel styling classes.

I have simulated the expected behavior by adding css style to FluentProvider in the code sandbox. But I suppose it is a less elegent way than using griffel.

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

[wfwf1997]

An extra wrapper for FluentProvider could work.