reactjs - 使用 typescript 向 Material 用户界面添加自定义断点

Question

我知道在 createMuiTheme() 函数中，您可以像这样更新断点的值。

const theme = createMuiTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
})

我也知道 Material UI(相对)最近更改了它，您可以在其中为断点添加自定义值。

  breakpoints: {
    values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
  },
});

但是，我使用的是 Typescript，我无法通过覆盖断点值来使其正常工作，正如他们在此处解释的那样:

declare module "@material-ui/core/styles/createBreakpoints"
{
  interface BreakpointOverrides
  {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    tablet: true; // adds the `tablet` breakpoint
    laptop: true;
    desktop: true;
  }
}

反而得到这个错误输入'{ tablet: number;笔记本电脑:号码；桌面:数字； }' 不可分配给类型 'BreakpointValues'。
对象字面量只能指定已知属性，并且“tablet”不存在于类型“BreakpointValues”中。

不确定我做错了什么？任何帮助将不胜感激。

Answer 1

我正在使用 typescript 和断点 MaterialUI，我认为您需要导入和修改某些界面，如文档所述(https://material-ui.com/guides/typescript/#customization-of-theme)。因此，例如我有一个像这样的 Theme.tsx:

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

declare module "@material-ui/core/styles/createBreakpoints" {
  interface BreakpointOverrides {
    xs: false; // removes the `xs` breakpoint
    sm: false;
    md: false;
    lg: false;
    xl: false;
    tablet: true; // adds the `tablet` breakpoint
    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: {
      tablet: 400,
      laptop: 900,
      desktop: 1200
    }
  },})