MUI Override Slider color options with module augmentation

Question

I'm trying to solve a typescript error regarding the chosen color on my slider component:

<Slider
  color="brown"
/>

The error is: Type '"brown"' is not assignable to type '"primary" | "secondary" | undefined'.

I have set the brown color on my theme, by augmenting the createPalette file.

declare module '@mui/material/styles/createPalette' {
    interface Palette {
        brown: PaletteColor
    }

    interface PaletteOptions {
        brown: PaletteColorOptions
    }
}

So now that I still have the error I looked in the Slider.d.ts file and found an interface: SliderPropsColorOverrides.

export interface SliderPropsColorOverrides {}
...
color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;

I try to merge it with my brown color:

declare module '@mui/material/Slider' {
    interface SliderPropsColorOverrides {
        darkest_blue: PaletteColorOptions
    }
}

But with no luck. Either my IDE (PhpStorm 2021.3) isn't compiling the new typescript code, or I'm missing something.

Answer 1

You were very close to something that would work, but the value for the augmentation of SliderPropsColorOverrides should just be true rather than PaletteColorOptions.

In my example sandbox I have the following key pieces:

createPalette.d.ts

import "@mui/material/styles/createPalette";
declare module "@mui/material/styles/createPalette" {
  interface Palette {
    brown: PaletteColor;
  }
  interface PaletteOptions {
    brown: PaletteColorOptions;
  }
}

Slider.d.ts

import "@mui/material/Slider";

declare module "@mui/material/Slider" {
  interface SliderPropsColorOverrides {
    brown: true;
  }
}

There was one other problem that I addressed in a rather ugly fashion. The Slider prop-types were still causing a runtime validation message for the color prop. I found comments in some open issues about color customization that mention this prop-types aspect and I suspect it will eventually be addressed by MUI, but it might not be addressed for a while. In my sandbox, I work around this by creating a SliderPropTypesOverride.ts file in which I copied MUI's SliderRoot.propTypes.ownerState and then modified the color portion to include "brown". This copying of the prop-types definitely isn't ideal from a maintenance standpoint, but at the moment I don't see another way to address the runtime warning in dev mode.

Then this all gets used as follows:

demo.tsx

import React from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import "./SliderPropTypesOverride";
import Slider from "@mui/material/Slider";

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    brown: defaultTheme.palette.augmentColor({
      color: {
        main: "#A52A2A"
      },
      name: "brown"
    })
  }
});

export default function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <Slider color="brown" />
    </ThemeProvider>
  );
}

Related answers:

• Typescript Module augmentation is not working: Property 'main' does not exist on type 'PaletteColorOptions'
• How to add custom colors name on Material UI with TypeScript?