How to style Input Placeholder Fluent UI V9 color?

[clemwo]

How can I adjust the placeholder text color in a fluent ui v9 input component?

Using the browsers inspect tool I can see it uses --colorNeutralForeground4 by default.
How can I adjust?
Setting this style for example doesn't work:

    "&::placeholder": {
      color: "blue !important",
    },

What's the best way to overwrite that?

[spmonahan]

There are several ways you can accomplish this but I think the best way in this case is with className:

const useStyles = makeStyles({
  input: {
    "::placeholder": "blue"
  }
});

const MyReactComponent = () => {
  const styles = useStyles();

  return <Input input={{ className: styles.input }} placeholder="Example that overrides placeholder color"/>
};

Here are some working examples: https://stackblitz.com/edit/sgl9mzsa?file=src%2Fexample.tsx

[clemwo]

Thank you so much! That helps a lot :)