Search code examples
reactjsmaterial-ui

mui cannot override size style to Rating component

I cannot override default style of MUI Rating component. No matter what it defaults to medium 24 fontSize, and does not increase it. What had I done wrong?

import { Rating } from '@mui/material';

export const Stars = () => {
  return (
    <>
      <Rating name="size-large" defaultValue={2} size="large" />
      <Rating
        name="size-large"
        value={4.5}
        precision={0.5}
        sx={{ fontSize: '48px' }}
        size="large"
        readOnly
      />
    </>
  );
};

package.json

"dependencies": {
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@mui/icons-material": "^5.11.0",
    "@mui/lab": "^5.0.0-alpha.115",
    "@mui/material": "^5.11.9",
    "@tanstack/react-query": "^4.22.0",
    "axios": "^1.2.2",
    "formik": "^2.2.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.6.2",
    "styled-components": "^5.3.6",
    "yup": "^0.32.11"
  },

enter image description here

Solution

  • You're probably not calling this component and seeing some other component. Your code has the first stars with a default value of 2, but your screenshot shows the value at 440 / 550.

    Or you may have an MUI Ratings style override or global stylesheet preventing the inline sx styling from taking hold.

    You can right click Inspect the stars you are expecting to have a font-size: 48px then see what CSS stylesheet it's getting it's actual font-size from.

    Using your code and dependencies in a simple sandbox I see the larger stars as expected.