为什么 makeStyles 和 createStyles 必须分开（Material UI + TypeScript）？

Question

我一直在使用 Material UI 处理 TypeScript 问题所需的这种结构，这真的让我很烦恼，每次我想设计一个组件的样式时，我都需要记住如何将 2 个不同的函数组合成一个会产生钩子的东西（我可以用一个片段来解决它，但对我来说永远感觉不对）：

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

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

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突然期待propstype的必需参数(value: JSSFontface, index: number, array: JSSFontface[]) => unknown。

所以我假设，由于我的尝试失败了，这就是为什么首先需要 2 个单独的函数来安抚 TypeScript，但是编译器会决定抽象（感觉就像它一直在做）让我很困扰那一刻我试着干掉我的造型代码）。所以我的问题是：为什么？

Answer 1

当您使用或升级到 TypeScript 版本 > 3.4 时，您不需要调用 createStyle。此版本中可用的const断言可以阻止类型扩展。根据代码注释，该功能createStyles将在 MaterialUI v5 中删除（尽管尚未从 v5.0.0-alpha.23 中删除）。

我确实没有遇到任何类型扩展，eps1lon在github 问题评论中也证实了这一点。文档绝对应该更新。