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

本文介绍了MUI使用模块增强覆盖滑块颜色选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

但是没有运气。我的集成开发环境(PhpStorm 2021.3)没有编译新的打字脚本代码，或者我遗漏了什么。

推荐答案

您非常接近可以工作的内容，但是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属性类型仍导致color属性的运行时验证消息。我在一些关于颜色定制的公开问题中发现了提到这个道具类型方面的评论，我怀疑MUI最终会解决这个问题，但它可能在一段时间内不会得到解决。在我的沙箱中，我通过创建一个SliderPropTypesOverride.ts文件来解决这个问题，我在该文件中复制了MUI's SliderRoot.propTypes.ownerState，然后修改了color部分以包括"；Brown"；。从维护的角度来看，这种复制属性类型肯定不是很理想，但是目前我看不到在开发模式下解决运行时警告的其他方法。

然后所有这些都按如下方式使用：

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