Avatar random backgroundColor on fallback
See original GitHub issueHello I’m filling a users grid with the Avatar component, when the user has no photo the initial letter is shown, what I would like to know is how I can make each Avatar have a random backgroundColor when the image load fails.
If possible I would like to suggest as an improvement to the component to have the backgroundColor in a random way.
const useStyles = makeStyles((theme: Theme) =>
createStyles({
large: {
fontSize: "2.5rem",
width: 100,
height: 100
}
})
);
....
<Avatar
variant="square"
ref={setImageRef}
src={imageSrc}
alt={alt}
className={classes.large}
/>
Tnks.
Material-ui: v4.8.3
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Avatar random backgroundColor on fallback · Issue #19349
Hello I'm filling a users grid with the Avatar component, when the user has no photo the initial letter is shown, what I...
Read more >Set <Avatar> backgroundColor randomly - Stack Overflow
Several ways to do what you want. My suggestion: put the 3 classes in an array, pick a random number between 0 and...
Read more >Creating Avatars With Colors Using The Modulus
Using the modulus to create dynamic colored avatars. ... Then we'll add a background color (gray, as a fallback), make it round and...
Read more >Avatar - Chakra UI
You can customize the background color and icon of the fallback avatar icon to match your design requirements. To update the background, pass...
Read more >Avatar Fallback System
The Avatar Fallback system is a way for a user to select an avatar that ... or a randomly-colored robot with thumbnail when...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks @oliviertassinari , I made some changes to the code but it generates the same color for all the Avatar components, how could I make each Avatar have a different color?
@oliviertassinari again thank you, I did what you told me to do, my code is as follows in case anyone finds it useful