英文:
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"
}
英文:
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"
},
答案1
得分: 1
您可能没有调用此组件，而是看到了其他组件。您的代码将第一个星星的默认值设为2，但您的屏幕截图显示值为440/550。
或者您可能已经使用了MUI Ratings的样式覆盖或全局样式表，阻止了内联的sx样式生效。
您可以右键单击检查您期望具有font-size: 48px的星星，然后查看它实际的字体大小来自哪个CSS样式表。
使用您的代码和依赖项在简单的沙箱中，我看到了预期的较大星星。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论