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

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

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

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

我想要做的事情:

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

最佳答案

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

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

关于next.js - 使用样式组件在 LTR 和 RTL 之间切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67145584/