如何设置 Material UI OutlinedInput 占位符颜色答案

【问题标题】：How to set Material UI OutlinedInput Placeholder color如何设置 Material UI OutlinedInput 占位符颜色
【发布时间】：2021-08-16 14:41:37
【问题描述】：

我尝试更改 MaterialUI 占位符颜色的占位符颜色，但没有成功。这是我迄今为止尝试过的

 const useStyles = makeStyles((theme) => ({
        emailField: {
            width: 265,
            height: 13,
            fontWeight: 'bold',
            '&::placholder': { //This is meant to change the place holder color to green
                color: 'green'
            }
        }
    }));
    const classes = useStyles(theme);


    .....

    // Here is where I am trying to apply the styled class to the input element but to
    //No Success

     <OutlinedInput
                placeholder="name@email.com"
                inputProps={{
                    className: classes.emailField
                }}
            />

我们将不胜感激任何关于正确解决此问题的建议。谢谢。

【问题讨论】：

这能回答你的问题吗？ How to set color of border and icon in outlined materialUI input?
@ShahrzadGh 不，它没有

标签： reactjs material-ui

【解决方案1】：

请改正你的咒语风格。从“&::placeholder”到“&:placeholder”。

【讨论】：

【解决方案2】：

这应该可行，试试这个

const useStyles = makeStyles({
  customTextField: {
    "& input::placeholder": {
      color: "green"
    },
});

更新

您可以自定义样式

const useOutlinedInputStyles = makeStyles({
  root: {
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    }
  }
});

  const outlinedInputStyles = useOutlinedInputStyles();

导入概述输入

import OutlinedInput from "@material-ui/core/OutlinedInput";

      <OutlinedInput
          classes={outlinedInputStyles}
          id="id"
          labelWidth={40}
        />

【讨论】：

【解决方案3】：

定位 ::placeholder 伪选择器将不起作用，因为您在 Material-UI 输入组件中看到的占位符实际上是该输入的标签，它由 javascript 在焦点上进行动画处理

因此，为了更改占位符颜色目标，您的 CSS 文件中的 .MuiFormLabel-root 类然后更改颜色并确保将 CSS 文件导入到您的组件中

.MuiFormLabel-root {
  color: green !important;
}

检查this代码框来玩

【讨论】：