From 5bfc2db29db39e5b7ef6b17e01157323087ef54f Mon Sep 17 00:00:00 2001
From: mnajdova <mnajdova@gmail.com>
Date: Wed, 4 Sep 2024 11:35:50 +0200
Subject: [PATCH] use ownerState value

---
 packages/mui-material/src/Radio/Radio.js | 29 +++++++++++++++++++-----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
index f467ee44d82d02..9f01c99fb90897 100644
--- a/packages/mui-material/src/Radio/Radio.js
+++ b/packages/mui-material/src/Radio/Radio.js
@@ -9,6 +9,7 @@ import SwitchBase from '../internal/SwitchBase';
 import RadioButtonIcon from './RadioButtonIcon';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
+import useFormControl from '../FormControl/useFormControl';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
@@ -51,9 +52,9 @@ const RadioRoot = styled(SwitchBase, {
     },
     variants: [
       {
-        props: { color: 'default', disableRipple: false },
+        props: { color: 'default', disabled: false, disableRipple: false },
         style: {
-          [`&:not(.${radioClasses.disabled})&:hover`]: {
+          [`&:hover`]: {
             backgroundColor: theme.vars
               ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
               : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
@@ -63,9 +64,9 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color, disableRipple: false },
+          props: { color, disabled: false, disableRipple: false },
           style: {
-            [`&:not(.${radioClasses.disabled})&:hover`]: {
+            [`&:hover`]: {
               backgroundColor: theme.vars
                 ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
                 : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
@@ -75,9 +76,9 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color },
+          props: { color, disabled: false },
           style: {
-            [`&.${radioClasses.checked}&:not(.${radioClasses.disabled})`]: {
+            [`&.${radioClasses.checked}`]: {
               color: (theme.vars || theme).palette[color].main,
             },
           },
@@ -121,11 +122,26 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled: disabledProp,
     disableRipple = false,
     ...other
   } = props;
+
+  const muiFormControl = useFormControl();
+
+  let disabled = disabledProp;
+
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+
+  disabled ??= false;
+
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size,
@@ -154,6 +170,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       checkedIcon={React.cloneElement(checkedIcon, {
         fontSize: defaultCheckedIcon.props.fontSize ?? size,
       })}
+      disabled={disabled}
       ownerState={ownerState}
       classes={classes}
       name={name}