typescript - 将此 theme.js 重新创建为 theme.tsx

Question

Github 项目链接

我正在尝试将这个 material-ui theme.js 重新创建为打字稿并使用

const useStyles = makeStyles(theme => ({
  estimateButton: {
    ...theme.typography.estimate,
    backgroundColor: theme.palette.common.orange,
    borderRadius: 50,
    height: 45,
    width: 145,
    marginRight: 40,
    "&:hover": {
      backgroundColor: theme.palette.secondary.light
    }

我尝试使用材料 UI 文档中的模块扩充。我还在 StackOverflow 中浏览了类似的问题，但我仍然无法让它工作。与打字稿相比，感觉在 jsx 中进行这项工作更简单，但我仍然想了解它是如何工作的。

主题.js

我尝试从此处的一个答案中使用此解决方案，但似乎不起作用

import createMuiTheme, {
  Theme,
  ThemeOptions,
} from "@material-ui/core/styles/createMuiTheme";
import { makeStyles } from "@material-ui/core";
import { Typography } from "@material-ui/core/styles/createTypography";

interface ITypography extends Typography {
  tab: {
    fontFamily: String;
    textTransform: String;
    fontWeight: Number;
    color: String;
    fontSize: String;
  };
}
interface ITheme extends Theme {
  typography: ITypography;
}
interface IThemeOptions extends ThemeOptions {
  typography: ITypography;
}

const theme = createMuiTheme({
  typography: {
    fontWeightMedium: 600,
    fontFamily: ["Open Sans", "Arial", "sans-serif"].join(","),
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      color: "white",
      fontSize: "1rem",
    },
  },
} as IThemeOptions); // Use customized ThemeOptions type

const useStyles = makeStyles((theme: ITheme) => ({
  // Use customized Theme type
  root: {
    ...theme.typography.tab, // Work with no type error
  },
}));

标签： typescriptmaterial-ui