javascript 如何在Material UI中更改占位符的颜色React js

mzillmmw  于 2023-05-21  发布在  Java
关注(0)|答案(3)|浏览(116)

如何在Material UI中更改背景颜色和Skeleton组件的 Flink 颜色?
我正在尝试为它们设置自定义样式,如下所示:

<Skeleton variant="circle" classes={{root:'placeholder-animation'}} animation="wave" width={56} height={56} />
.placeholder-animation{
    background: chartreuse;
}
1tuwyuhd

1tuwyuhd1#

Material-ui使用makeStyles来覆盖全局类名的样式。
阅读材料ui文档,似乎你有不止一条路要走。
您可以使用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;
}
zsohkypk

zsohkypk2#

你不需要任何类来改变占位符的颜色你可以使用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 */
}
<input type="text" placeholder="Write somthing.">
lyr7nygr

lyr7nygr3#

sx={{"&::after":{background: `linear-gradient( 90deg, transparent, #B4AFA5, transparent)`}}}

相关问题