将 Typescript 与 Material-UI useStyles 一起使用时将道具传递给类答案

【问题标题】：Pass props to classes when using Typescript with Material-UI useStyles将 Typescript 与 Material-UI useStyles 一起使用时将道具传递给类
【发布时间】：2020-10-13 01:20:26
【问题描述】：

我正在将一个项目从 js 转换为 Typescript，并在一个组件中将 props 传递给 material-ui 主题以根据输入进行更改。

react 函数组件的相关部分如下：

import React from 'react';
import {makeStyles} from "@material-ui/core/styles";
// @ts-ignore
import {SketchPicker} from 'react-color';
import InputAdornment from "@material-ui/core/InputAdornment";


const useStyles = makeStyles(theme => ({
    colorSwatch: props => ({
        width: theme.spacing(5),
        height: 30,
        border: '1px solid black',
        borderRadius: theme.spacing(0.25),
        backgroundColor: props.embedColor,
    }),
}));


export default function FormFragmentEmbed(props: any) {
    const { register, errors } = props.form;
    const { defaultValues } = props;

    const [colorPicker, setColorPicker] = React.useState<string>(defaultValues.embedColor);

    const classes = useStyles({
        embedColor: watchColor,
    });


    return (    
                <TextField
                    name={'embedColor'}
                    label={'Embed Color'}
                    defaultValue={colorPicker}
                    error={errors.embedColor !== undefined}
                    inputRef={register({})}
                    InputProps={{
                        endAdornment: <InputAdornment position="end"><Box className={classes.colorSwatch}/></InputAdornment>
                    }}
               />
}

但是我在makeStyles 中定义backgroundColor 的那一行给了我一个错误

TS2339：类型“{}”上不存在属性“embedColor”。

我该如何解决这个错误？

也是半相关的，如您所见，我添加了一条 linting 行来忽略 SketchPicker 的导入，因为当我尝试导入时 TS 吐出一个错误。导入它的正确方法是什么，以免导致错误？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

尝试使用这种语法，

const useStyles = makeStyles({
colorSwatch: props => ({
    width: theme.spacing(5),
    height: 30,
    border: '1px solid black',
    borderRadius: theme.spacing(0.25),
    backgroundColor: props.embedColor,
  }),
});

    export default function FormFragmentEmbed(props: any) {
    const { register, errors } = props.form;
    const { defaultValues } = props;

    const [colorPicker, setColorPicker] = React.useState<string>(defaultValues.embedColor);

    const classes = useStyles(defaultValues);


    return (    
                <TextField
                    name={'embedColor'}
                    label={'Embed Color'}
                    defaultValue={colorPicker}
                    error={errors.embedColor !== undefined}
                    inputRef={register({})}
                    InputProps={{
                        endAdornment: <InputAdornment position="end"><Box className={classes.colorSwatch}/></InputAdornment>
                    }}
               />
}

我猜现在您的代码应该可以正常工作了。 Official documentation 链接以使用带有 makeStyles 和 useStyles 的道具。

【讨论】：