如何解决向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} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。