I'm currently using the alpha branch of material-ui@v5.
At the moment, I have developed a custom Timeline component that functions like this:
const CustomTimeline = () => {
const mdDown = useMediaQuery(theme => theme.breakpoints.down("md"));
return (
<Timeline position={mdDown ? "right" : "alternate"}>
{/* some children */}
</Timeline>
);
};
Although it works mostly as intended, mobile users might encounter layout shifts due to the fact that useMediaQuery relies on JavaScript and is only executed client-side. I am searching for a CSS-based solution that can be used with Server-Side Rendering (SSR).
One potential approach I've considered is:
const CustomTimeline = () => {
return (
<Fragment>
<Timeline sx={{ display: { xs: "block", md: "none" } }} position="right">
{/* some children */}
</Timeline>
<Timeline sx={{ display: { xs: "none", md: "block" } }} position="alternate">
{/* some children */}
</Timeline>
</Fragment>
);
};
This solution should work because the sx prop gets converted into emotion styling and gets included in the HTML file. However, this method will increase the size of the DOM. Are there any better alternatives to achieve the same result?