如何向 Material UI Shadows 添加新属性 |打字稿答案

【问题标题】：How to add new attributes to Material UI Shadows | Typescript如何向 Material UI Shadows 添加新属性 |打字稿
【发布时间】：2021-03-11 04:57:27
【问题描述】：

我正在尝试自定义阴影的 Material UI 类型，但是当我尝试在我的代码中使用它时出现以下错误。

Tuple type Shadows of length 25 has no element at index 25.

我尝试了很多解决方案，但都没有帮助。以下是我尝试过的：

我在根级别定义了一个 index.d.ts 文件，并添加了 declare 模块来自定义 Mui 主题的 shadow 属性。

declare module '@material-ui/core/styles/shadows' {
  type Shadows = [
    {
      a1: string;
      a2: string;
      a3: string;
    }
  ];
}

【问题讨论】：

我无法重现您的问题。它对我有用。
@Mahdi - 我已经添加了错误截图，请看看你是否可以帮忙
它说 theme.shadows 数组只有 25 个项目，从索引 0 到 24，所以你应该把它改成 theme.shadows[24]
@yaya - 默认的 Mui 阴影范围为 [0-24]，我正在附加 Mui 主题未检测到的新阴影。参考网址 - github.com/mui-org/material-ui/blob/next/packages/material-ui/…
好像是打字稿，所以这个touple的类型有25个元素。也许您会实时添加新主题，但您没有将类型更改为大小为 26 的 touple。所以也许您应该以某种方式覆盖类型并将其设置为长度为 26 的 touple 或类似的东西。跨度>

标签： reactjs typescript material-ui

【解决方案1】：

您好，您可以使用 ES6 扩展运算符自定义任何阴影。

const theme = createMuiTheme({
  shadows: [...createMuiTheme({}).shadows.map((shadow, i) => (
    i === 1 ? '0 0 18px 0 rgba(9, 32, 46, 0.2)' : shadow
  ))],
});

【讨论】：