I see the following example JSX code:
const AppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
and I don't understand what is doing.
So I used babel to translate and get:
const AppBar = styled(MuiAppBar, {
shouldForwardProp: prop => prop !== 'open'
}) < AppBarProps > (({
theme,
open
}) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen
})
})
}));
What does this ... < AppBarProps > ... mean? (The rest I I understand just fine)
Sorry if this seems like the dummest question ever, but can't imagine what is going on here.
It's a way to declare generic type parameter in typescript. styled returns a HOC that creates a component with the styles attached. I'll breakdown the code to make it more easier to digest:
const hoc = styled(MuiComponent)
// StyledMuiComponent now can accept the props with type MuiComponentProps
const StyledMuiComponent = hoc<MuiComponentProps>(styles)