[英]how to type transition props in material ui popper
我正在使用材料 ui popper并希望将转换分离为单独的 function 如下
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';
import Fade from '@material-ui/core/Fade';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
paper: {
border: '1px solid',
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
},
}),
);
export default function TransitionsPopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'transitions-popper' : undefined;
const popperTrans = ({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick}>
Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
{popperTrans}
</Popper>
</div>
);
}
我正在使用 typescript 并且它抛出 tslint 错误Binding element 'TransitionProps' implicitly has an 'any' type
。 如何在此处输入TransitionProps
?
或者, TransitionProps
已导出,因此您可以执行以下操作:
import { TransitionProps as TransitionPropsType } from "@material-ui/core";
然后:
const popperTrans = ({ TransitionProps }: { TransitionProps: TransitionPropsType }) => (
<Fade {...TransitionProps} timeout={350}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)
我找到了答案。 我们可以从Fade
导入FadeProps
并使用它来输入TransitionProps
。
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';
import Fade, { FadeProps } from '@material-ui/core/Fade';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
paper: {
border: '1px solid',
padding: theme.spacing(1),
backgroundColor: theme.palette.background.paper,
},
}),
);
export default function TransitionsPopper() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(anchorEl ? null : event.currentTarget);
};
const open = Boolean(anchorEl);
const id = open ? 'transitions-popper' : undefined;
const popperTrans = ({ TransitionProps }: { TransitionProps: FadeProps }) => (
<Fade {...TransitionProps} timeout={350}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)
return (
<div>
<button aria-describedby={id} type="button" onClick={handleClick}>
Toggle Popper
</button>
<Popper id={id} open={open} anchorEl={anchorEl} transition>
{popperTrans}
</Popper>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.