如何在材質UI中更改背景的顏色和骨架組件的閃爍顏色？

我正在嘗試為它們設置自定義樣式，如下所示:

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

.placeholder-animation{
    background: chartreuse;
}

Material-ui使用makeStyles用全局類名覆蓋樣式。

看了材料-ui文檔，似乎你有不止一條路要走。

您可以使用makeStyles用全局類名覆蓋樣式。

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

... 

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

或者你可以簡單地使用類名

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

.placeholder-animation{
    background: chartreuse;
}

你不需要任何類來改變占位符的顏色，你可以使用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.">