在Material UI主题中的“Typography”中添加自定义新属性“tab”时出现Typescript类型错误

sdnqo3pr 于 2023-05-30 发布在 TypeScript

关注(0)|答案(1)|浏览(221)

目前，使用

"react": "^17.0.2", 
@material-ui/core": "^4.12.3",
"@material-ui/icons": "^4.11.2",
"@material-ui/styles": "^4.11.4",

在Material UI主题中的“Typography”内添加自定义新属性“tab”时出现Typescript类型错误
错误：属性“tab”在类型“Typography”上不存在
它在theme.tsx文件中工作正常
主题.tsx文件

declare module "@material-ui/core/styles/createTypography" {
  interface TypographyOptions {
    tab?: {
      fontFamily?: string;
      textTransform?: string;
      fontWeight?: number;
      fontSize?: string;
    };
  }
}

const theme = createTheme({
  typography: {
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      fontSize: "1rem",
    },
  },
});

在另一个typescript组件上，我得到属性'tab'错误类型'Typography'上不存在属性'tab'

const useStyles = makeStyles((theme) => ({
  tab: {
    ...theme.typography.tab, // error: Property 'tab' does not exist on type 'Typography'
    minWidth: 10,
    marginLeft: "25px",
  },
}));

那么如何获得新的自定义主题 prop 呢？

typescript

来源：https://stackoverflow.com/questions/70906950/typescript-type-error-when-adding-custom-new-property-tab-inside-typography

1条答案

按热度按时间

polkgigr1#

正确的主题设置。

import { createTheme } from "@material-ui/core";

const arcBlue = "#0B72B9";
const arcOrange = "#FF8C00";

declare module "@material-ui/core/styles/createPalette" {
  interface CommonColors {
    blue: string;
    orange: string;
  }
}

declare module "@material-ui/core/styles/createTypography" {
  interface Typography {
    tab: TypographyStyleOptions | undefined;
  }

  interface TypographyOptions {
    tab: TypographyStyleOptions | undefined;
  }
}

const theme = createTheme({
  palette: {
    primary: {
      main: `${arcBlue}`,
    },
    secondary: {
      main: `${arcOrange}`,
    },
    common: {
      blue: `${arcBlue}`,
      orange: `${arcOrange}`,
    },
  },
  typography: {
    tab: {
      fontFamily: "Raleway",
      textTransform: "none",
      fontWeight: 700,
      fontSize: "1rem",
    },
  },
});

export default theme;

赞(0）回复(0）举报 2023-05-30

我来回答

在Material UI主题中的“Typography”中添加自定义新属性“tab”时出现Typescript类型错误

1条答案

相关问题

热门标签

最新问答