typescript - 为什么 makeStyles 和 createStyles 必须分开(Material UI + TypeScript)？

Question

我一直在使用 Material UI 处理 TypeScript 问题所需的这种结构，这真的让我很烦恼，每次我想为组件设置样式时，我都需要记住如何将 2 个不同的函数组合成会产生钩子(Hook)的东西(我可以用一个片段来解决它，但这对我来说从来都不是正确的):

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    ...styles
  })
);

因此，我当然尝试通过将其抽象为 1 个函数来使其更加干燥，但我似乎无法理解如何使这些类型为此工作。这是我笨拙的尝试:

const makeUseStyles = (styleFunc: (th: Theme) => CSSProperties | CreateCSSProperties<{}>) =>
  makeStyles((theme: Theme) => {
    const st = styleFunc(theme);
    return createStyles(st);
  });

这会产生 2 个问题:createStyles不接受 st作为论据:

Type 'unknown' is not assignable to type 'PropsFunc<(value: JSSFontface, index: number, array: JSSFontface[]) => unknown, CreateCSSProperties<(value: JSSFontface, index: number, array: JSSFontface[]) => unknown>>'

以及 makeUseStyles 返回的函数突然期待一个必需的参数props类型 (value: JSSFontface, index: number, array: JSSFontface[]) => unknown .
所以我假设，因为我的尝试失败了，这就是为什么首先需要 2 个单独的函数来安抚 TypeScript，但是编译器会决定抽象让我很困扰(感觉就像它一直在做那一刻我试着把我的样式代码弄干一点)。所以我的问题是:为什么？

Answer 1

当您使用或升级到 TypeScript 版本 > 3.4 时，您不需要调用 createStyle。 const assertions在此版本中可用的内容可以击败类型扩大。根据a code comment , 函数 createStyles将在 MaterialUI v5 中删除(尽管尚未从 v5.0.0-alpha.23 中删除)。
我确实没有遇到任何类型扩大，eps1lon 也证实了这一点。在 github issue comment .文档绝对应该更新。