Question

我一直在寻找如何使这些类型正确，但如果不使用我不想使用的 any，我找不到任何有用的东西。

我有这段代码可以在正确使用它的地方工作并设置组件样式：

import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles((theme) => ({
    mainContainer: {
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
    },
    wrapper: {
        display: 'flex',
        borderRadius: '20px',
        maxWidth: '459px',
        justifyContent: "center",
        maxHeight: '526px',
        padding: '0px',
        border: `2px solid ${theme.palette.primary.lightPurple}`
    },
    logo: {
        marginBottom: "40px"
    },
    logInText: {
        fontWeight: "700"
    },
    signUpContainer: {
        margin: '3px',
        padding: '80px',
    },
    form: {
        width: '100%', // Fix IE 11 issue.
        marginTop: theme.spacing(1),
    },
    submit: {
        margin: theme.spacing(4, 0, 0),
        color: '#fff',
        fontWeight: 'bold'
    },
    link: {
        color: theme.palette.primary.orange,
    },
    label: {
        fontSize: '14px'
    },
    anzaLogo: {
        marginBottom: '30px'
    },
    loginInput: {
        height: '40px',
        alignItems: 'center',
        fontSize: '13px',
        '&::before': {
            content: '""',
            position: 'absolute',
            display: 'block',
            left: '1px',
            width: '8px',
            height: '38px',
            borderBottomLeftRadius: '3px',
            borderTopLeftRadius: '3px',
            backgroundColor: '#F29A4A'
        }

    },
    innerInput: {
        padding: '11px 12px'
    },
    labelOutlined: {
        fontSize: '14px',
        transform: "translate(20px, 15px) scale(1)",
    },
}))

给我这个疯狂的打字稿错误：

src/components/Signup/SignupStyles.tsx:3:30 - error TS2345: Argument of type '(theme: Theme) => { mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; ... 4 more ...; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' is not assignable to parameter of type 'Styles<Theme, {}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">'.
  Type '(theme: Theme) => { mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; ... 4 more ...; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' is not assignable to type 'StyleRulesCallback<Theme, {}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">'.
    Call signature return types '{ mainContainer: { height: string; display: string; justifyContent: string; alignItems: string; flexDirection: "column"; }; wrapper: { display: string; borderRadius: string; maxWidth: string; justifyContent: string; maxHeight: string; padding: string; border: string; }; ... 10 more ...; labelOutlined: { ...; }; }' and 'StyleRules<{}, "form" | "label" | "link" | "submit" | "mainContainer" | "wrapper" | "logo" | "logInText" | "signUpContainer" | "anzaLogo" | "loginInput" | "innerInput" | "labelOutlined">' are incompatible.
      The types of 'logInText' are incompatible between these types.
        Type '{ fontWeight: "700"; }' is not assignable to type 'CSSProperties | CreateCSSProperties<{}> | PropsFunc<{}, CreateCSSProperties<{}>>'.
          Type '{ fontWeight: "700"; }' is not assignable to type 'CreateCSSProperties<{}>'.
            Types of property 'fontWeight' are incompatible.
              Type '"700"' is not assignable to type 'FontWeightProperty | PropsFunc<{}, FontWeightProperty | undefined> | undefined'.

  3 const useStyles = makeStyles((theme) => ({
                                 ~~~~~~~~~~~~~
  4     mainContainer: {
    ~~~~~~~~~~~~~~~~~~~~
... 
 71     },
    ~~~~~~
 72 }))
    ~~

我必须为 theme 参数声明什么类型？导入和使用 Theme 类型仍然会出现相同的错误。

当我将函数变成一个对象时，它可以工作 - 但我需要使用 theme 参数来获取您所看到的特定颜色和其他样式。

有什么想法吗？这应该是 Typescript 中常见的事情。

Answer 1

这对我有用 - 使用 typeof theme。

import myTheme from '../myTheme'

const useStyles = makeStyles((theme: typeof myTheme) => ({
  ...
}))

您的具体错误是因为 TS 不喜欢将 string "700" 分配给 fontWeight - 使用数字 700。

Answer 2

添加导入：

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

然后：

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

material-ui 打字稿 makeStyles() 类型

2 个答案: