[英]how to type transition props in material ui popper
I am using material ui popper and want to separate the transition into a separate function as follows我正在使用材料 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>
);
}
I am using typescript and it's throwing tslint error Binding element 'TransitionProps' implicitly has an 'any' type
.我正在使用 typescript 并且它抛出 tslint 错误
Binding element 'TransitionProps' implicitly has an 'any' type
。 How can I type TransitionProps
here?如何在此处输入
TransitionProps
?
Alternatively, TransitionProps
is exported, so you can do:或者,
TransitionProps
已导出,因此您可以执行以下操作:
import { TransitionProps as TransitionPropsType } from "@material-ui/core";
Then:然后:
const popperTrans = ({ TransitionProps }: { TransitionProps: TransitionPropsType }) => (
<Fade {...TransitionProps} timeout={350}>
<div className={classes.paper}>The content of the Popper.</div>
</Fade>
)
I found the answer.我找到了答案。 We can import
FadeProps
from Fade
and use that to type TransitionProps
.我们可以从
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.