如何缩小材质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}
...
/>

Answer 2

我知道这个问题是前一阵子问的，但我发现

<Rating
value={5}
readOnly
sx={{
fontSize: "5rem",
"& .MuiRating-icon": {
width: '4.5rem'
}
}}
icon={<StarRateIcon fontSize="5rem" sx={{ color: "black" }} />}
/>

为我工作。它能够使星星更紧密地结合在一起。