[Slider] Customize disabled state

I have overridden the disabled state of Slider.

but I don’t know which syntax is correct:

const theme = createMuiTheme({
  components: {
    MuiSlider: {
      styleOverrides: {
        root: {
           // case 1: Working
          // "&.MuiSlider-root.Mui-disabled": {
          //   color: "red"
          // }

          // case 2: Not Working
          "&.Mui-disabled": {
            color: "red"
          }
        }
      }
    }
  }
});

Usually, I use method 2. but it doesn’t seem to work in this case

More details:

https://codesandbox.io/s/continuousslider-material-demo-forked-3qphg

[mnajdova]

Agree, I’ll handle it next week

[oliviertassinari]

@mnajdova It works, you are right. So it’s not only an issue with the Button but with all the components. e.g. in the slider so the color wins over the root.

diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js
index f2fd1ff942..7ae62e11bc 100644
--- a/packages/material-ui/src/Slider/Slider.js
+++ b/packages/material-ui/src/Slider/Slider.js
@@ -37,10 +37,10 @@ const overridesResolver = (props, styles) => {

   const marked = marks.length > 0 && marks.some((mark) => mark.label);

-  return deepmerge(
+  return deepmerge(styles.root || {},
     {
       ...styles[`color${capitalize(styleProps.color)}`],
-      [`&.${sliderClasses.disabled}`]: styles.disabled,
+      [`&.${sliderClasses.disabled}`]: {...styles.disabled},
       ...(marked && styles.marked),
       ...(styleProps.orientation === 'vertical' && styles.vertical),
       ...(styleProps.track === 'inverted' && styles.trackInverted),
@@ -56,7 +56,6 @@ const overridesResolver = (props, styles) => {
         [`&.${sliderClasses.disabled}`]: styles.disabled,
       },
     },
-    styles.root || {},
   );
 };

I would personally prefer option 3. It seems simpler, maybe a bit faster at runtime and prevent developer to mix nested selectors in the root with a slot. They have to pick one approach, which should avoid footguns:

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index cf52016d61..a112f3548b 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/packages/material-ui/src/Button/Button.js
@@ -13,27 +13,25 @@ import buttonClasses, { getButtonUtilityClass } from './buttonClasses';
 const overridesResolver = (props, styles) => {
   const { styleProps } = props;

-  return deepmerge(
-    {
-      ...styles[styleProps.variant],
-      ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`],
-      ...styles[`size${capitalize(styleProps.size)}`],
-      ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`],
-      ...(styleProps.color === 'inherit' && styles.colorInherit),
-      ...(styleProps.disableElevation && styles.disableElevation),
-      ...(styleProps.fullWidth && styles.fullWidth),
-      [`& .${buttonClasses.label}`]: styles.label,
-      [`& .${buttonClasses.startIcon}`]: {
-        ...styles.startIcon,
-        ...styles[`iconSize${capitalize(styleProps.size)}`],
-      },
-      [`& .${buttonClasses.endIcon}`]: {
-        ...styles.endIcon,
-        ...styles[`iconSize${capitalize(styleProps.size)}`],
-      },
+  return ({
+    [`& .${buttonClasses.label}`]: styles.label,
+    [`& .${buttonClasses.startIcon}`]: {
+      ...styles.startIcon,
+      ...styles[`iconSize${capitalize(styleProps.size)}`],
     },
-    styles.root || {},
-  );
+    [`& .${buttonClasses.endIcon}`]: {
+      ...styles.endIcon,
+      ...styles[`iconSize${capitalize(styleProps.size)}`],
+    },
+    ...styles.root,
+    ...styles[styleProps.variant],
+    ...styles[`${styleProps.variant}${capitalize(styleProps.color)}`],
+    ...styles[`size${capitalize(styleProps.size)}`],
+    ...styles[`${styleProps.variant}Size${capitalize(styleProps.size)}`],
+    ...(styleProps.color === 'inherit' && styles.colorInherit),
+    ...(styleProps.disableElevation && styles.disableElevation),
+    ...(styleProps.fullWidth && styles.fullWidth),
+  });
 };