Javascript 向材质UI添加其他/自定义道具

我想知道是否有可能将自定义道具添加到材质UI组件。换句话说，我希望在API为给定组件提供的道具基础上增加其他道具

使用

链接的示例

：

从文档中可以看出，Link没有一个props

活动的

，我想添加它

代码沙盒：

我尝试的是：

import React from 'react'
import { WithStyles, withStyles } from '@material-ui/core/styles'
import Link from '@material-ui/core/Link'

interface OwnProps extends WithStyles<typeof styles> {
  active?: boolean
}

export type Props = OwnProps & React.InputHTMLAttributes<HTMLInputElement> <-- I tried also "& any"

const MyCustomLink: React.FC<Props> = (props: Props) => {
  const { active }: Props = props

  return <Link active={active} > My link </Link>
}

export default withStyles(styles)(MyCustomLink)

从“React”导入React
从“@material ui/core/styles”导入{WithStyles，WithStyles}”
从“@material ui/core/Link”导入链接
接口OwnProps使用样式扩展{
活动？：布尔值
}
导出类型Props=OwnProps&React.inputtmlattributes{
常量{active}:Props=Props
返回我的链接
}
导出默认样式（样式）（MyCustomLink）

我想通过在我的

OwnProps

中将

active

传递给

Pros

，那么

MyCustomLink

组件也会有

active

道具。 我错了

我得到的错误是：

类型“IntrinsicatAttributes&AnchorHtmlatAttributes”上不存在属性“active”

---

这很正常，您正在尝试添加和设置链接中不存在的活动属性。您定义的道具是针对自定义组件

MyCustomLink

，而不是链接。因此，在调用组件而不是链接时，需要设置道具

import Link from "@material-ui/core/Link";
import {
    createStyles,
    Theme,
    WithStyles,
    withStyles,
} from "@material-ui/core/styles";
import React from "react";

const styles = (theme: Theme) =>
    createStyles({
        linkStyle: {
            color: "black",
        },
    });

interface OwnProps extends WithStyles<typeof styles> {
    active?: boolean;
}

export type Props = OwnProps & React.InputHTMLAttributes<HTMLInputElement>;

const MyCustomLink: React.FC<Props> = (props: Props) => {
    const { active }: Props = props;

    if (active) {
        return <Link style={{ backgroundColor: "red" }}> my link </Link>;
    } else {
        return <Link style={{ backgroundColor: "blue" }}> my link </Link>;
    }
};

export default withStyles(styles)(MyCustomLink);

从“@material ui/core/Link”导入链接；
进口{
创建样式，
主题
用方式,，
用方式,，
}来自“@material ui/core/styles”；
从“React”导入React；
常量样式=（主题：主题）=>
创建样式({
链接样式：{
颜色：“黑色”，
},
});
接口OwnProps使用样式扩展{
活动？：布尔值；
}
导出类型Props=OwnProps&React.inputtmlattributes；
const MyCustomLink:React.FC=（props:props）=>{
常量{active}:Props=Props；
如果（活动）{
返回我的链接；
}否则{
返回我的链接；
}
};
导出默认样式（样式）（MyCustomLink）；

在app.tsx中

<MyCustomLink active={false} />

---

您应该创建一个最小的可复制示例（可以打开）：