带有模块增强的 MUI 覆盖滑块颜色选项答案

【问题标题】：MUI Override Slider color options with module augmentation带有模块增强的 MUI 覆盖滑块颜色选项
【发布时间】：2022-01-23 19:02:29
【问题描述】：

我正在尝试解决关于我的滑块组件上所选颜色的打字稿错误：

<Slider
  color="brown"
/>

错误是：Type '"brown"' is not assignable to type '"primary" | "secondary" | undefined'.

我通过增加 createPalette 文件为我的主题设置了棕色。

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

    interface PaletteOptions {
        brown: PaletteColorOptions
    }
}

所以现在我仍然有错误，我查看了Slider.d.ts 文件并找到了一个接口：SliderPropsColorOverrides。

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

我尝试将它与我的棕色合并：

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

但没有运气。要么我的 IDE (PhpStorm 2021.3) 没有编译新的打字稿代码，要么我遗漏了一些东西。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您非常接近可行的方法，但增加 SliderPropsColorOverrides 的值应该只是 true 而不是 PaletteColorOptions。

在我的example sandbox 中，我有以下关键部分：

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;
  }
}

还有一个问题我以一种相当丑陋的方式解决了。 Slider prop-types 仍然导致 color prop 的运行时验证消息。我在一些关于颜色自定义的未解决问题中发现了 cmets，其中提到了这个 prop-types 方面，我怀疑它最终会被 MUI 解决，但可能暂时不会解决。在我的沙箱中，我通过创建一个SliderPropTypesOverride.ts 文件来解决这个问题，我在其中复制了MUI's SliderRoot.propTypes.ownerState，然后修改了color 部分以包含“棕色”。从维护的角度来看，这种 prop-types 的复制绝对不是理想的，但目前我没有看到另一种解决开发模式下运行时警告的方法。

然后这一切都被使用如下：

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>
  );
}