material-ui 容器不适用于打字稿上的自定义断点答案

【问题标题】：material-ui container doesn't work with custom breakpoints on typescriptmaterial-ui 容器不适用于打字稿上的自定义断点
【发布时间】：2021-03-27 00:41:37
【问题描述】：

我在我的学习项目中使用 material-ui 和 typescript。我遇到了一个我不知道如何解决的问题。

我在 material-ui 主题中使用自定义断点。

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

const theme = createMuiTheme({
  breakpoints: {
    values: {
      small: 480,
      mobile: 640,
      tablet: 960,
      laptop: 1280,
      desktop: 1440,
    },
  },
});

export { theme };

并创建新文件 BreakpointsOptions.d.ts

import * as React from 'react';
import { BreakpointOverrides } from '@material-ui/core/styles/createBreakpoints';

declare module '@material-ui/core/styles/createBreakpoints' {
  interface BreakpointOverrides {
    /* ------------------------------------- */
    /*      Removes defaults breakpoint      */
    /* ------------------------------------- */
    xs: false;
    sm: false;
    md: false;
    lg: false;
    xl: false;

    /* ------------------------------------- */
    /*            Adds new breakpoint        */
    /* ------------------------------------- */
    small: true;
    mobile: true;
    tablet: true;
    laptop: true;
    desktop: true;
  }
}

现在我想使用 Material-ui 中的 Container。

import React, { FC } from 'react';
import Container from '@material-ui/core/Container';

type PropTypes = {
  component: string;
  children: NonNullable<React.ReactNode>;
  className?: string;
};

export const MaxWidthContainer: FC<PropTypes> = (props: PropTypes) => {
  const { component, children, className } = props;

  return (
    <Container component={component} maxWidth="desktop" className={className}>
      {children}
    </Container>
  );
};

但我得到了错误 enter image description here

那么，如何在不修改“node_modules”文件夹中的文件的情况下修复此错误？

【问题讨论】：

标签： reactjs typescript material-ui

【解决方案1】：

通过阅读 material-ui 文档，我认为 Container 组件 maxWidth 属性只接受以下值：

  'lg'
| 'md'
| 'sm'
| 'xl'
| 'xs'
| false

您已将maxWidth 设置为desktop，这会引发该错误。

但我了解您的目标是设置自定义断点，例如 desktop。

根据文档，这是您在 typescript 中为 material-ui 设置自定义断点的方式，您可以创建一个 Theme.tsx 文件，该文件的范围在您的 tsconfig 内：

import {
    createMuiTheme
} from '@material-ui/core/styles'
import {
    BreakpointOverrides
} from "@material-ui/core/styles/createBreakpoints"

declare module "@material-ui/core/styles/createBreakpoints" {
    interface BreakpointOverrides {
        /* ------------------------------------- */
        /*      Removes defaults breakpoint      */
        /* ------------------------------------- */
        xs: false;
        sm: false;
        md: false;
        lg: false;
        xl: false;
        
        /* ------------------------------------- */
        /*            Adds new breakpoint        */
        /* ------------------------------------- */
        small: true;
        mobile: true;
        tablet: true;
        laptop: true;
        desktop: true;
    }
}


declare module '@material-ui/core/styles/createMuiTheme' {
    interface Theme {
        appDrawer: {
            width: React.CSSProperties['width']
            breakpoint: BreakpointOverrides
        }
    }
    // allow configuration using `createMuiTheme`
    interface ThemeOptions {
        appDrawer ? : {
            width ? : React.CSSProperties['width']
            breakpoint ? : BreakpointOverrides
        }
    }
}

export const theme = createMuiTheme({
    breakpoints: {
        values: {
            small: 480,
            mobile: 640,
            tablet: 960,
            laptop: 1280,
            desktop: 1440,
        }
    },
})

另外请确认只有编辑器中的 linter 警告持续存在。比如尝试运行应用程序，看看是否仍然抛出错误。

【讨论】：