How do I add easings to the Material-UI Slide component? I'm not seeing the props that would allow this. But I read something somewhere about spreading props?
<Slide
in={variable}
timeout={500}
direction="right"
mountOnEnter={true}
unmountOnExit={true}
>
<Child />
</Slide>
In MUI v5, you can change the default timing functions of the Slide component by overriding the easing props:
<Slide
direction="up"
in={checked}
easing={{
enter: "cubic-bezier(0, 1.5, .8, 1)",
exit: "linear"
}}
>
{icon}
</Slide>
In MUI v4, you need to override the timing function defined in theme.transitions.easing.easeOut for enter transition and theme.transitions.easing.sharp for exit transition.
const theme = createMuiTheme({
transitions: {
easing: {
easeOut: "cubic-bezier(0, 1.5, .8, 1)",
sharp: "linear"
}
}
});
<ThemeProvider theme={theme}>
<Slide direction="up" in={checked}>
{icon}
</Slide>
</ThemeProvider>