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

Posted 2023-02-22

技术标签:

【中文标题】带有模块增强的 MUI 覆盖滑块颜色选项【英文标题】：MUI Override Slider color options with module augmentation 【发布时间】：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) 没有编译新的打字稿代码，要么我遗漏了一些东西。

【问题讨论】：

【参考方案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>
  );