Adjust size value in Material UI-CodePudding

Assuming I am suing the <Rating /> component https://mui.com/material-ui/api/rating/.

I can set its size with the size prop. But where do I define the actual values for size small, medium and large?

CodePudding user response：

You can try Styled Rating:

<StyledRating
  name="customized-color"
  defaultValue={2}
  precision={0.5}
  icon={
    <StarIcon
      style={{ width: "50px", height: "50px" }}
      fontSize="inherit"
    />
  }
  emptyIcon={
    <StarOutlineIcon
      style={{ width: "50px", height: "50px" }}
      fontSize="inherit"
    />
  }
/>

You can get the full codes from this link Star Rating

CodePudding user response：

Yes do it by font size

<Rating sx={{
      fontSize: '6.5rem',        
    }}
 />