mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.1k stars 32.34k forks source link

[material-ui][Radio] Large size shows warning in console #40143

Open mbehtemam-dsv opened 12 months ago

mbehtemam-dsv commented 12 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://stackblitz.com/edit/react-hbyt9f-iryn4i?file=Demo.tsx

I've created new size for Radio button , the large size , but I got this warning in chrome developer console. It seems it's because of this line of code

Here is the warning :

react.development.js:209 Warning: Failed prop type: Invalid prop `fontSize` of value `large` supplied to `RadioButtonIcon`, expected one of ["small","medium"].
    at RadioButtonIcon (http://localhost:5173/node_modules/.vite/deps/chunk-HMV62V6O.js?v=72451cad:130:5)
    at Radio2 (http://localhost:5173/node_modules/.vite/deps/chunk-HMV62V6O.js?v=72451cad:240:17)
    at label

I've created a Stackblitz live demo so you can check it.

Current behavior 😯

It show warning in console for

Expected behavior 🤔

It should accept custom size without showing warning.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
PunitSoniME commented 11 months ago

@mbehtemam-dsv

You can set custom size, check this https://mui.com/material-ui/react-radio-button/#size The third radio element is custom sized

mbehtemam-dsv commented 11 months ago

@PunitSoniME Thanks for your reply , but that's not what I want , I would like to change it via theme and pass the size="large" as an prop , if you check the stackblitz you can see I already implemented it but I got warning.

DiegoAndai commented 11 months ago

Hey @mbehtemam-dsv, thanks for the report!

As you mentioned, the warning comes from here as the size prop gets forwarded here. The icon looks large because the size prop ends up here. It actually works out of the box without any custom code: example.

The warning is safe to ignore for now. We should eliminate it, so I'm adding it to the v7 milestone, as we'll be doing design updates for that release. We're not doing it right now as there are workarounds, like the one @PunitSoniME mentioned.