如何减少材质UI中星星之间的间隙

Question

我正在努力缩小星星之间的距离，但没有运气。

以下代码供您参考

 <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 > 

我该如何解决？

Answer 1

使用itemStyle和itemIconStyle道具：

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

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

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