Mentions css not working

[akanz]

I tried styling my react-mentions component but to no avail. the css doesn't seem to apply to the components. A screenshot of my stylesheet is applied below.

Other styles in the stylesheet works perfectly even the textarea styles works too. I need y'all help on this.

[swenceslao]

You may take a look at calling the event property on the onChange to set the value of your text. Like so:

<MentionsInput
  {...other}
  inputRef={ref}
  value={value}
  onChange={(e) => onChange(e.target.value)}
  singleLine={false}
  style={defaultStyle}
>
  <Mention
    trigger="@"
    data={data}
    markup="[__display__]"
    style={{
      backgroundColor: blueGrey[themeMode === 'dark' ? 800 : 50],
      color: 'transparent',
    }}
    appendSpaceOnAdd
  />
</MentionsInput>

Before I was using (event, newValue, newPlainTextValue, mentions) => setValue(newPlainTextValue) to set the value of my internal text state, and while it does work in terms of the mentioning functionality, the styles for highlighting the text in the textarea didn't -- until i switched to onChange={(e) => onChange(e.target.value)}.

[dks333]

onChange={(e) => onChange(e.target.value)}

@swenceslao this line of change works for me! Thanks!