javascript - 使用 SSR 支持根据断点更改 Prop

Question

我正在使用 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 的大小。有没有更好的方法来实现这一目标？

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 名称可能会更改，但这种方法避免了我的转变。让我知道它是否有效。