如何更改材质UI React js中占位符的颜色答案

【问题标题】：How to change the color of the placeholder in material UI React js如何更改材质UI React js中占位符的颜色
【发布时间】：2021-05-20 18:55:32
【问题描述】：

Material UI中如何改变背景颜色和Skeleton组件的闪烁颜色？

我正在尝试为它们设置自定义样式，如下所示：

<Skeleton variant="circle" classes={{root:'placeholder-animation'}} animation="wave" width={56} height={56} />

.placeholder-animation{
    background: chartreuse;
}

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

Material-ui 使用makeStyles 用全局类名覆盖样式。

阅读Material-ui doc，看来你的路不止一条。

您可以使用makeStyles 用全局类名覆盖样式。

const useStyles = makeStyles({
  root: {
    background: red,
  }
});

... 

<Skeleton variant="circle" classes={{root: classes.root}} animation="wave" width={56} height={56} />

或者你可以简单地使用className

<Skeleton variant="circle" className="placeholder-animation" animation="wave" width={56} height={56} />

.placeholder-animation{
    background: chartreuse;
}

【讨论】：

【解决方案2】：

你不需要任何类来改变占位符的颜色你可以使用 sudo 选择器来改变占位符的颜色检查这个

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}

这里是工作示例

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}

&lt;input type="text" placeholder="Write somthing."&gt;

【讨论】：

我试试看！！