使用 SSR 支持根据断点更改道具

Question

我正在使用material-ui@v5，即。 alpha 分支。

目前，我有一个自定义的 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 属性被转换为 emotion 样式并嵌入到 HTML 文件中，但这会增加 DOM 大小。有没有更好的方法来实现这一目标？

Answer 1

我之前也遇到过同样的问题，我使用 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 名称可能会更改，但这种方法避免了我的转变。让我知道它是否有效。