时间戳

首页 > 解决方案 > 使用样式组件在 LTR 和 RTL 之间切换？

next.js - 使用样式组件在 LTR 和 RTL 之间切换？

问题描述

我正在使用 next.js 构建一个英语-阿拉伯语应用程序，并希望使用户能够在两种语言之间切换。
我从 next.js 中找到了这个示例：with-styled-components-rtl。它使用 StylisRTLPlugin，它会翻转所有 CSS 样式以适应 RTL 布局：

    // _document.js
    <StyleSheetManager stylisPlugins={[stylisRTLPlugin]}>
      <App {...props} />
    </StyleSheetManager>

它工作正常，但问题是我无法stylisRTLPlugin根据当前的有条件删除，因为我locale无法访问useRouter()in _document.js。

我想能够做什么：

    <StyleSheetManager stylisPlugins={locale === 'ar' ? [stylisRTLPlugin] : null}>
      <App {...props} />
    </StyleSheetManager>

标签： next.jsstyled-components

解决方案

将此配置添加到您的.babelrc以强制您的样式在服务器上呈现。

  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
      }
    ]
  ]

推荐阅读