[Bug]: Custom Styles Not Applying to Option Component in Dropdown

[patrickreisx]

Component

Dropdown

Package version

9.58.3

React version

17.0.1

Environment

Package Version: @fluentui/react-components (9.58.3)
Framework: React (17.0.1)
Environment: SharePoint
Browser: Edge (latest)

Current Behavior

The Option component does not apply the custom styles correctly. When inspecting the element, some CSS variables appear as undefined.

Expected Behavior

The custom styles defined in makeStyles should be applied to the Option component, and all CSS variables should be correctly defined.

Reproduction

Not applicable

Steps to reproduce

• Create a Dropdown component with multiple Option components.
• Inspect the Option component in the browser's developer tools.

import { Dropdown, Option, makeStyles, FluentProvider, webLightTheme } from '@fluentui/react-components';

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    gap: "2px",
    maxWidth: "400px",
  },
});

const App = () => {
  const customStyles = useStyles();
  const options = ['Option 1', 'Option 2'];

  return (
    <FluentProvider theme={webLightTheme}>
      <div className={customStyles.root}>
        <Dropdown placeholder="Select an option">
          {options.map((option) => (
            <Option key={option}>
              {option}
            </Option>
          ))}
        </Dropdown>
      </div>
    </FluentProvider>
  );
};

export default App;

Are you reporting an Accessibility issue?

no

Suggested severity

Urgent - No workaround and Products/sites are affected

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.

[CampbellOwen]

@patrickreisx Can you create a repro stackblitz? You can click "Open in Stackblitz" on any example here for a starter: https://react.fluentui.dev/?path=/docs/components-dropdown--docs

In your example I don't see any custom styles being applied to Options. Additionally I copied this code locally and I didn't see any undefined styles.

[patrickreisx]

@CampbellOwen Since it's a SharePoint environment, the code on StackBlitz wouldn't be very useful. It seems to be something related to the Fluent Provider configuration in SPFX. Maybe I should close this issue and open one in the "sp-dev-docs" repository. Thank you very much in advance.