What's the best way to change the font color of the placeholder text in the input field?

[suruchidev]

Is there a way to pass in a style to MentionsInput to change the color of the placeholder text in the input field?

I know the placeholder text can be changed by adding the below style in the dev console of the browser to the MentionsInput element

::placeholder {
 color: red
}

Looking for a suggestion on how to pass in something like the above to MentionsInput in the code. Passing in a color value using the style prop just seems to update the color of the text typed into the input, not the placeholder.

[lilybarrett]

I am also running into this issue. Would love input/a code example!

[Ifera]

Hi, were you able to find any fix for this?

[LissetteIbnz]

Hi! If you add a className and after that, you add a style for the input::placeholder.

For example:

// your React component

import styles from "./your-component.module.scss";
···
<MentionsInput
        className="mentions"
        classNames={styles}
        id="mentions"
        placeholder={placeholder}
        value={value}
        {...props}
      >

// styles file "your-component.module.scss"
···
.mentions--multiLine .mentions__input {
  ···
  height: 65px;

  &::placeholder {
    color: red;
  }
}