在带有打字稿的材料 ui 中使用 makeStyles

Question

我正在尝试将 JavaScript 模板转换为 Typescript。 所以我有这个accordionStyle.ts，如下所示

import {
  primaryColor,
  grayColor
} from "../../material-dashboard-pro-react";

const accordionStyle = (theme?:any) => ({
  root: {
    flexGrow: 1,
    marginBottom: "20px"
  },
  expansionPanel: {
    boxShadow: "none",
    "&:before": {
      display: "none !important"
    }
  },
  expansionPanelExpanded: {
    margin: "0 !important"
  },
  expansionPanelSummary: {
    minHeight: "auto !important",
    backgroundColor: "transparent",
    borderBottom: "1px solid " + grayColor[5],
    padding: "25px 10px 5px 0px",
    borderTopLeftRadius: "3px",
    borderTopRightRadius: "3px",
    color: grayColor[2],
    "&:hover": {
      color: primaryColor[0]
    }
  },
  expansionPanelSummaryExpaned: {
    color: primaryColor[0],
    "& $expansionPanelSummaryExpandIcon": {
      [theme.breakpoints.up("md")]: {
        top: "auto !important"
      },
      transform: "rotate(180deg)",
      [theme.breakpoints.down("sm")]: {
        top: "10px !important"
      }
    }
  },
  expansionPanelSummaryContent: {
    margin: "0 !important"
  },
  expansionPanelSummaryExpandIcon: {
    [theme.breakpoints.up("md")]: {
      top: "auto !important"
    },
    transform: "rotate(0deg)",
    color: "inherit",
    position: "absolute",
    right: "20px",
    [theme.breakpoints.down("sm")]: {
      top: "10px !important"
    }
  },
  expansionPanelSummaryExpandIconExpanded: {},
  title: {
    fontSize: "15px",
    fontWeight: "bolder",
    marginTop: "0",
    marginBottom: "0",
    color: "inherit"
  },
  expansionPanelDetails: {
    padding: "15px 0px 5px"
  }
});

export default accordionStyle;

我正在尝试将上述样式导入到我的组件中，如下所示。

import styles from "../../assets/jss/material-dashboard-pro-react/components/accordionStyle";
const useStyles = makeStyles(styles);

以上行在 Javascript 中运行良好。 从这一行 --> const useStyles = makeStyles(styles); 我遇到打字稿错误

No overload matches this call.
  Overload 1 of 2, '(style: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props?: any) => Record<...>', gave the following error.
    Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
      Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
        Call signature return types '{ root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { minHeight: string; ... 6 more ...; "&:hover": { ...; }; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' and 'Record<"root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails", CSSProperties | ... 1 more ... | PropsFunc<...>>' are incompatible.
          The types of 'expansionPanelSummaryExpandIcon' are incompatible between these types.
            Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
              Type '{ [x: number]: { top: string; }; transform: string; color: string; position: string; right: string; }' is not assignable to type 'CreateCSSProperties<{}>'.
                Types of property 'position' are incompatible.
                  Type 'string' is not assignable to type '"inherit" | "absolute" | "-moz-initial" | "initial" | "revert" | "unset" | "fixed" | "-webkit-sticky" | "relative" | "static" | "sticky" | PropsFunc<{}, "inherit" | "absolute" | "-moz-initial" | ... 8 more ... | undefined> | undefined'.
  Overload 2 of 2, '(styles: Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">, options?: Pick<...> | undefined): (props: {}) => Record<...>', gave the following error.
    Argument of type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to parameter of type 'Styles<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.
      Type '(theme?: any) => { root: { flexGrow: number; marginBottom: string; }; expansionPanel: { boxShadow: string; "&:before": { display: string; }; }; expansionPanelExpanded: { margin: string; }; expansionPanelSummary: { ...; }; ... 5 more ...; expansionPanelDetails: { ...; }; }' is not assignable to type 'StyleRulesCallback<any, {}, "root" | "expansionPanel" | "expansionPanelExpanded" | "expansionPanelSummary" | "expansionPanelSummaryExpaned" | "expansionPanelSummaryContent" | "expansionPanelSummaryExpandIcon" | "expansionPanelSummaryExpandIconExpanded" | "title" | "expansionPanelDetails">'.

那么如何在 typescript 的“makeStyles”中添加“styles”呢？

Answer 1

您必须将其添加到 tsconfig.json

{
     "compilerOpti`enter code here`ons": {
     "lib": ["es6", "dom"],
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": true
   }
 }

并使用您的风格与此相同： 第一次导入这个

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

然后这样做

const useStyles = makeStyles((theme: Theme) => createStyles({
         root:{
            backgroundColor : '#f9f9f9',
         }});

Answer 2

你应该像这样使用 makeStyles：

const accordionStyle = makeStyles((theme?: any) => ({

然后声明类：

const classes = accordionStyle();

在组件中使用：

<h1 className={classes.test}>Hello CodeSandbox</h1>

示例：https://codesandbox.io/s/cold-river-n21g9?file=/src/App.tsx:1901-1959