使用带有 Typescript 的 Material UI makeStyles

Question

我为 classes 属性创建了一个单独的文件，例如MuiAlert

有什么方法可以告诉makeStyles 你只能使用 Alert 类？

以下方法有效，但我相信一定有更好的方法。所以例如如果我将root 重命名为roott，我会收到'roott' does not exist in type 'Partial<Record<AlertClassKey, any>>' 的错误

游乐场示例：https://codesandbox.io/s/typescript-react-material-ui-3t7ln?file=/src/index.ts

import { Theme, makeStyles } from "@material-ui/core";
import { AlertClassKey } from "@material-ui/lab/Alert";

export const useAlertClasses = makeStyles<Theme>(
  (): Partial<Record<AlertClassKey, any>> => ({
    root: {
      borderRadius: 3,
    }
}));

Answer 1

我的解决方案：

import { Theme } from "@material-ui/core/styles/createMuiTheme";
import { StyleRules } from "@material-ui/core/styles/withStyles";
import { makeStyles } from "@material-ui/core/styles";
import { createStyles } from "@material-ui/core/styles";

import { AlertClassKey } from "@material-ui/lab/Alert";

export const alertOverrides = (
    theme: Theme
): Partial<StyleRules<AlertClassKey>> => {
    return {
        root: {
            backgroundColor: "red !important",
        },
    };
};

export const useAlertStyles = makeStyles<Theme, {}>(
    (theme) => {
        return createStyles(alertOverrides(theme) as never);
    },
    { name: "MuiAlert" }
);