MUI Textfield placeholder text color looks faded

Question

I have been trying to set the placeholder color for MUI TextField.

I could see the placeholder turning red with the styles i have added but the red color looks faded.

how do i style the placeholder so that the color looks solid.

                            <TextField
                                placeholder="hello"
                                variant="outlined"
                                sx={{
                                    input: {
                                        color: 'red', // <----- i want it to be original red.
                                    },
                                    label: { color: 'blue' },
                                }}
                            />

Answer 1

Some browsers (such as Firefox) set the default opacity of placeholders to something less than 100%.

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder#opaque_text

So, you should set opacity of placeholder to 1

<TextField
   placeholder="hello"
   variant="outlined"
   sx={{
      input: {
         color: 'red',
         "&::placeholder": {    // <----- Add this.
            opacity: 1,
         },
      },
      label: { color: 'blue' }
   }}
/>