React, Mui Rating Component

Question

I'm recently working on a project using react. I would like to know if there is a way to color the Material-UI component of the rating with custom colors.

Does this answer your question? [Material-UI : Rating Component, change color based on value](https://stackoverflow.com/questions/63451658/material-ui-rating-component-change-color-based-on-value) — hgb123, Sep 16 '21 at 08:42

score 1 · Answer 1 · answered Sep 16 '21 at 08:23

1

Actually, you can have whatever icon shape or colour that you like

Take a look at this example from Material UI site:

answered Sep 16 '21 at 08:23

Ryan Le

7,708
1
13
23

score 0 · Answer 2 · answered Sep 16 '21 at 08:26

0

You can use this example

material-ui.com/components/rating/customize

and create a costm component in your preferred color

smt like this

const StyledRating = withStyles({
  iconFilled: {
    color: 'red',
  },
  iconHover: {
    color: 'darkred',
  },
})(Rating);

answered Sep 16 '21 at 08:26

Vahe Nikoghosyan

429
6
6

Thanks...my idea was to give a different color for each iconFilled element. Is it possible to do this? – Roberto Vizzi Sep 16 '21 at 08:38
most likely yes, can you see this example https://codesandbox.io/s/material-demo-forked-2jymk?fontsize=14&hidenavigation=1&theme=dark&file=/demo.tsx – Vahe Nikoghosyan Sep 16 '21 at 08:57

React, Mui Rating Component

2 Answers2