[FIXED] How to reduce gap between Stars in material UI

Issue

I am trying to reduce gap between stars but no luck.

Code below for your ref

 <MuiThemeProvider  >
                            <Rating
                                onChange={() => console.log('onChange')}
                                value={4}
                                max={5}
                                iconFilled={<ToggleStar  color={colors.green500} />}
                                iconHovered={<ToggleStarBorder  color={colors.green500} />}
                                iconNormal ={<ToggleStarBorder color={colors.black300}/>}
                                className={classes.Rating}
                                 spacing ={0}
                                onChange={(value) => console.log(`Rated with value ${value}`)}
                              />
                        </MuiThemeProvider > 

How can I resolve this?

Solution

Use the itemStyle and itemIconStyle props:

const smallDistanceStyle = {
  width: 30,
  height: 30,
  padding: 5
}

const iconStyle = {
   width: ...,
   height: ...
}

<Rating
  itemStyle={smallDistanceStyle}
  itemIconStyle={iconStyle}
  ...
/>

Answered By - gazdagergo
Answer Checked By - - Marilyn (ReactFix Volunteer)