我正在使用 material-ui@v5
, IE。阿尔法分支。
目前,我有一个自定义 Timeline
执行此操作的组件:
const CustomTimeline = () => {
const mdDown = useMediaQuery(theme => theme.breakpoints.down("md"));
return (
<Timeline position={mdDown ? "right" : "alternate"}>
{/* some children */}
</Timeline>
);
};
它主要按预期工作,但移动用户可能会遇到布局偏移,因为 useMediaQuery
使用 JS 实现,仅在客户端。我想寻求与上述代码等效的 CSS 实现以与 SSR 一起使用。我想到了以下几点:
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>
);
};
这将从 sx
开始生效。 prop 转换为 emotion
样式并嵌入到 HTML 文件中,但这会增加 DOM 的大小。有没有更好的方法来实现这一目标?
最佳答案
我之前遇到过同样的问题,我使用 Next.js 来处理 SSR。但这无关紧要。
请先安装此包并将其导入您的根目录,例如 App.js
import mediaQuery from 'css-mediaquery';
然后,创建这个函数来传递material-ui的ThemeProvider const ssrMatchMedia = useCallback(
(query) => {
const deviceType = parser(userAgent).device.type || 'desktop';
return {
matches: mediaQuery.match(query, {
width: deviceType === 'mobile' ? '0px' : '1024px'
})
};
},
[userAgent]
);
您应该通过 userAgent!然后将 ssrMatchMedia 传递给 MuiUseMediaQuery
<ThemeProvider
theme={{
...theme,
props: {
...theme.props,
MuiUseMediaQuery: {
ssrMatchMedia
}
}
}}>
这应该有效。我没有使用 material-UI v5。使用旧的。 MuiUseMediaQuery 名称可能会更改,但这种方法避免了我的转变。让我知道它是否有效。
关于javascript - 使用 SSR 支持根据断点更改 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67515510/