use ownerState value

mui · Sep 4, 2024 · 5bfc2db · 5bfc2db
1 parent 15141c5
commit 5bfc2db
Showing 1 changed file with 23 additions and 6 deletions.
diff --git 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}