Color change not working for InputBase#s placeholder component in react.js-CodePudding

I have been trying to change the color of inputbase's placeholder. I found few methods online and tried to apply them but none of them are working. Beloware my codes.

<InputBase
        id="input-id"
        placeholder="enter the search word"
        className="input"
      />

my css:

.input::placeholder {
  color: blue;
}

CodePudding user response：

Remove inverted commas in color: 'blue';

.input::placeholder { 
  color: blue;
}

CodePudding user response：

Try using the !important flag

.input::placeholder {
  color: blue !important;
}

If that doesn't work, make sure that your CSS is imported correctly.