MUI 覆盖滑块颜色选项与模块增强

Question

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

<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) 没有编译新的打字稿代码，要么我遗漏了一些东西。

Answer 1

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

在我的示例沙箱中，我有以下关键部分：

创建调色板.d.ts

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

滑块.d.ts

import "@mui/material/Slider";

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

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

然后这一切都将按如下方式使用：

演示.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>
  );
}

相关回答：

• Typescript 模块增强不起作用：类型“PaletteColorOptions”上不存在属性“main”
• 如何使用 TypeScript 在 Material UI 上添加自定义颜色名称？