material-ui 排版变体类型增强并不总是起作用

58wvjzkj  于 4个月前  发布在  其他
关注(0)|答案(7)|浏览(44)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

  • 无响应*

当前行为 😯

目前,https://mui.com/material-ui/customization/typography/#adding-amp-disabling-variants 的指导要求您添加以下类型增强:

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

但在某些情况下,访问 theme.typography.poster 仍然会导致类型错误:

packages/theme/src/componentsOverrides/MuiCssBaseline.ts:8:21 - error TS2339: Property 'poster' does not exist on type 'Typography'.
    8     pre: typography.poster,
                          ~~~~~~

预期行为 🤔

访问 theme.typography.poster 永远不会导致类型错误。
在我们的项目中,我只有一个解决方案:直接增强 Typography(而不是 TypographyVariants(Typography 的别名)):

declare module "@mui/material/styles/createTypography" {
  interface Typography {
    poster: TypographyStyle;
  }
}

上下文 🔦

  • 无响应*

您的环境 🌎

  • 无响应*
omhiaaxx

omhiaaxx1#

但是这还不足以解决问题,当你执行typography.poster时会出现类型错误:
你能提供一个Codesandbox吗?你可以克隆这个模板:https://material-ui.com/r/issue-template-latest
预期的使用方式类似于<Typography variant="poster">poster</Typography>;

qhhrdooz

qhhrdooz2#

哦,现在我明白了它的工作原理。TypographyVariants 实际上是 Typography 的别名:
material-ui/packages/mui-material/src/styles/index.d.ts
第24行
| | TypographyasTypographyVariants, |
所以增强 TypographyVariants 是为了将属性添加到 Typography 中。但如果用户由于某种原因没有导入 @mui/material/styles (直接或间接地),那么这个操作就会失败,因此没有声明 TypographyVariants 作为别名。对于我们来说,这种情况发生在运行 Jest 测试时。在其他地方,增强操作是正常的。已根据情况更新了问题标题。
抱歉,很难在代码沙盒中重现这个问题,所以我不打算这样做。对我们来说,扩展 Typography 而不是 TypographyVariants 是一个更容易的选择。

shyt4zoc

shyt4zoc3#

我认为在模块增强中正确导入是非常关键的。请查看此处解决类似问题的解析。

6xfqseft

6xfqseft4#

是的,问题在于文档中的这一部分:
https://mui.com/material-ui/customization/typography/

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

应该像这样:

import "@mui/material/styles"
import "@mui/material/Typography"

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}
zf2sa74q

zf2sa74q5#

我尝试在主题增强文件中添加

import type {} from "@mui/material/styles";
import type {} from "@mui/material/Typography";

,但这没有帮助。

9w11ddsr

9w11ddsr6#

import type { TypographyOptions } from '@mui/material/styles/createTypography';
import type { CSSProperties } from 'react';

/**
 * The Endless Quirks of Mui ¯\_(ツ)_/¯
 * Typography variant spread expression workaround.
 * // sx={theme => ({
 * //   ...theme.typography.poster,
 * // })}
 */
declare module '@mui/material/styles/createTypography' {
  interface Typography {
    poster: CSSProperties;
  }
  interface TypographyOptions {
    poster: CSSProperties;
  }
}

const typography: TypographyOptions = {
  poster: {
    // your CSSProperties here
  },
};

export const theme = createTheme({
  ... 
  typography,
  ...
});
luaexgnf

luaexgnf7#

是的,问题在于文档中的这一部分:
https://mui.com/material-ui/customization/typography/

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

应该是这样的:

import "@mui/material/styles"
import "@mui/material/Typography"

declare module '@mui/material/styles' {
  interface TypographyVariants {
    poster: React.CSSProperties;
  }

  // allow configuration using `createTheme`
  interface TypographyVariantsOptions {
    poster?: React.CSSProperties;
  }
}

// Update the Typography's variant prop options
declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides {
    poster: true;
    h3: false;
  }
}

感谢@incompletude,你救了我的一天!

相关问题