MUI 文本字段占位符文本颜色看起来褪色

Question

我一直在尝试为 MUI TextField 设置占位符颜色。

我可以看到占位符随着我添加的样式变成红色，但红色看起来褪色了。

如何设置占位符的样式，使颜色看起来很纯。

                            <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

因此，您应该将 placeholder 的 opacity 设置为 1

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

MUI 文本字段占位符文本颜色看起来褪色

MUI Textfield placeholder text color looks faded

material-ui