I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System.
How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works, but I'm struggling to achieve the same effect with a Grid element. It seems to not have a width of 0px.
For example:
let show = true; //reactUseState
const toggle = (p) => {
return (!p);
}
<Grid container direction="row>
<Grid id="a" item xl={show ? 12 : 9}>{children}</Grid>
<Grid id="b" item xl={show ? false : 3}>{otherchildren}</Grid>
</Grid>
<Button onClick={() => toggle(show)}>Show 1 or 2 items</Grid>
Hoping someone out there knows the secret trick!