如何在 MUI 5 中扩展 theme.mixins答案

【问题标题】：How to extend the theme.mixins in MUI 5如何在 MUI 5 中扩展 theme.mixins
【发布时间】：2022-07-27 03:17:39
【问题描述】：

我正在将 Material UI 从第 4 版升级到第 5 版，但我遇到了一些旧主题的问题。

我们使用打字稿，所以当我们想要扩展主题时，需要添加适当的类型。

我想在主题中添加以下内容：

...
 mixins: {
      toolbar: {
        minHeight: TOOLBAR_HEIGHT,
      },
      urlLink: {
        '&:link': {
          cursor: 'pointer',
          color: '#1a0dab',
        },
        '&:hover': {
          textDecoration: 'underline',
        },
        '&:visited': {
          color: '#609',
        },
      },
    },
...

工具栏正常工作，但 urlLink 部分不满意。

在第 4 版中，我已将以下内容添加到文件中，并且可以正常工作：

mixins.ts
---------

import { CSSProperties } from '@material-ui/core/styles/withStyles'

declare module '@material-ui/core/styles/createMixins' {
  interface Mixins {
    urlLink: CSSProperties
  }
  // allow configuration using `createMuiTheme`
  interface MixinsOptions {
    urlLink?: CSSProperties
  }
}

但是现在，在更新导入后，我收到以下错误：

Type '{ '&:link': { cursor: string; color: string; }; '&:hover': { textDecoration: string; }; '&:visited': { color: string; }; }' is not assignable to type 'Properties<string | number, string & {}>'.
  Object literal may only specify known properties, and ''&:link'' does not exist in type 'Properties<string | number, string & {}>'

我不完全理解类型覆盖的一般工作原理，所以如果有人能解释如何解决这个问题或它们一般是如何工作的，我将不胜感激。

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

回答这个问题太晚了，我真诚地希望你已经弄清楚了，但如果你像我一样最终在这个页面上寻找这个答案，这就是我相信你需要做的。

在一个文件中，通常在您声明要传递给 createTheme 的属性对象的位置附近，您需要一个如下所示的新模块声明：

mixins.ts
---------

import { CSSProperties } from "@mui/material/styles/createMixins";

declare module "@mui/material/styles" {
  // Allow for custom mixins to be added
  interface Mixins {
    urlLink?: CSSProperties
  }
}

有关此的文档目前位于此处： https://mui.com/material-ui/customization/theming/#custom-variables

希望这会有所帮助！

【讨论】：