如何使用 Typescript 在 Material UI 中扩展调色板

Posted 2023-03-06

【中文标题】如何使用 Typescript 在 Material UI 中扩展调色板

【英文标题】：How can I extend Color Palette in Material UI with Typescript

【发布时间】：2020-07-20 16:40:54

【问题描述】：

我是 react 和 typescript 的新手。 我正在尝试在全局主题上扩展调色板。

在我的 themeContainer.tsx 中

import  ThemeOptions  from '@material-ui/core/styles/createMuiTheme';

declare module '@material-ui/core/styles/createPalette' 
  // allow configuration using `createMuiTheme`
  interface Palette 
    accent: PaletteColor
  
  interface PaletteOptions 
    accent: PaletteColorOptions,
    tertiary: PaletteColorOptions
  
;

const ThemeContainer: React.FunctionComponent<Props> = (props, themeOptions: ThemeOptions) => 
  const  children  = props;

  const theme = useMemo(() => 
    const nextTheme = createMuiTheme(
      ...themeOptions,
      palette: 
        accent: 
          main: '#ff0000'
        ,
      
    );

    return nextTheme;
  );

  return <ThemeProvider theme=theme>children</ThemeProvider>;
;

export default ThemeContainer;

但是在我的组件上，出现了错误。

此调用没有过载。

提前谢谢你。

【参考方案1】：

在 TS 中不是 100% 确定，但它对我来说是这样的：

declare module "@material-ui/core/styles/createPalette" 
  interface Palette     
    lightWarning: Palette["primary"];
  
  

  interface PaletteOptions     
    lightWarning: PaletteOptions["primary"];
   

在 projekt 主页找到简要介绍： https://material-ui.com/guides/typescript/#customization-of-theme

或者在这篇文章中： https://medium.com/javascript-in-plain-english/extend-material-ui-theme-in-typescript-a462e207131f

【参考方案2】：

对于使用 MUI 5 的用户，您可以使用自定义类型覆盖 Palette 和 PaletteOptions，然后使用现有类型扩展这些接口：

import 
  Palette as MuiPallete,
  PaletteOptions as MuiPaletteOptions,
 from '@mui/material/styles/createPalette';

declare module '@mui/material/styles/createPalette' 
  interface Palette extends MuiPallete 
    neutralShade: main: string;
  

  interface PaletteOptions extends MuiPaletteOptions 
    neutralShade?: main: string;
  

【参考方案3】：

简短的回答是您不能（也不应该）这样做。

长答案包含以下解释：

Material UI 是 React 对 Material Design 概念的实现之一。

Material Design 是 Google 于 2014 年开发的一种设计语言。在 Google Now 首次亮相的“卡片”主题的基础上，Material Design 使用了更多基于网格的布局、响应式动画和过渡、填充和深度效果，例如灯光和阴影。

作为 Material Design 的一部分，您拥有 color system，其中包含一个主要/次要（以及它们每个的变体）。 您还可以控制深色/浅色主题，并且它们中的每一个都有原色/次要颜色。

如果您需要更多颜色 - 您可能不遵循 Material Design 的理念。

您始终可以使用 CSS/Variables/Styled 组件来获得额外的设计选项，但通常不应该这样做。

【讨论】：

我赞成这个，因为它是一个有效的论点。然而，AFAIK，Material Design 只是一个指导方针，而不是一个完整而严格的设计体系。我看到很多专业设计师根据自己的喜好对其进行修改。所以，这个问题也是有效的。

不完全正确。在 Material Design 中，您有特定数量的颜色，每种颜色都有特定的含义和用途。你不能真的只是添加新的颜色。如果你这样做了——你就没有保留 Material Design 系统的原始想法/结构。不过，我非常感谢您的支持 :-) 感谢@MaximMazurok！

作为开发人员，我同意你的看法。但根据我的经验，设计师往往对此事有自己的看法，他们将材料指南视为严格的规则。他们有时通过将材料卡与自定义元素和颜色混合使用“一切都是混合”的创意方法。因此，如果 OP 的工作是开发一个更改了材料设计的网站 - 那么他的案例是有效的。尽管它不是“纯粹的”材料设计，但有时开发人员必须做开发人员必须做的事情；D

不确定是否赞成或反对（所以我不会）。你是对的，你通常可以只切换原色或次要颜色，但是 MUI 实际上有关于扩展主题的文档，所以它显然不会被皱眉。 mui.com/customization/theming 。在某些情况下，如果用户可以自定义他们的 UI，或者开发人员需要在样式之间快速切换以向客户端显示备选方案，则用户可能需要许多主题。