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

某些浏览器（例如 Firefox）将占位符的默认不透明度设置为小于 100%。

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

所以，你应该opacity设置placeholder为1

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