向Material UI添加其他/自定义道具

问题描述

我想知道是否可以向Material UI组件添加自定义道具。换句话说，我想为API提供的给定组件的其他道具。

使用Link的示例：https://material-ui.com/api/link/

根据文档，链接没有道具active，我想添加它。

CodesandBox：https://codesandbox.io/s/interesting-robinson-2zfw4?file=/src/App.tsx

我尝试过的事情：

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)

我当时想通过将active传递到OwnProps中并将Pros传递给MyCustomLink，那么active组件也将具有<div class="container"> <div class="row"> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596877098462-fd1cfc6482c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1587712606457-20d42e24300e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> <div class="col-lg-4 "> <img class="img-thumbnail" src="https://images.unsplash.com/photo-1596716999716-544f09b06743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt=""></div> </div> </div> 道具。 我错了。

我得到的错误是：

类型“ IntrinsicAttributes和AnchorHTMLAttributes”上不存在“活动”属性

解决方法

这很正常，您正在尝试添加和设置Link中不存在的active属性。您要定义的道具用于自定义组件MyCustomLink，而不用于Link。因此，在调用组件而不是Link时，您需要设置道具。

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);

在app.tsx中

<MyCustomLink active={false} />