CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Aadhit Shanmugam
Aadhit Shanmugam

Reputation: 519

How to change the color of the placeholder in material UI React js

How do I change the color of the background and the flashing color of the Skeleton component in Material UI ?

I'm trying to set custom styling for them as shown below:

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

.placeholder-animation{
    background: chartreuse;
}

Upvotes: 2

Views: 4192

Answers (3)

Daniel Morocho
Daniel Morocho

Reputation: 21

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

Upvotes: 2

crg
crg

Reputation: 4557

Material-ui use makeStyles to override styles with global class names.

Reading the Material-ui doc, it seems that tou have more than one way to go.

You could use makeStyles to override styles with global class names.

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

... 

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

Or you could simply use className

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

.placeholder-animation{
    background: chartreuse;
}

Upvotes: 3

Ankit Tiwari
Ankit Tiwari

Reputation: 4690

You don't need any class to change color of placeholder you can use sudo selector to change color of placeholder check this

::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;
}

here is working example 

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}
<input type="text" placeholder="Write somthing.">

Upvotes: 1

Related Questions