Switching between LTR and RTL using styled-components?

user_7982963 0
Viewed 682

I'm building an English-Arabic app with next.js, and want to enable users to switch between the two languages.
I found this example from next.js: with-styled-components-rtl. It uses StylisRTLPlugin, which flips all CSS styles to fit RTL layout:

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

It works fine, but the problem is that I can't remove stylisRTLPlugin conditionally based on the current locale bacause I have no access to useRouter() in _document.js.

What I want to be able to do:

    <StyleSheetManager stylisPlugins={locale === 'ar' ? [stylisRTLPlugin] : null}>
      <App {...props} />
    </StyleSheetManager>
styled-components next.js
1 Answers

Add this config to your .babelrc to force your styled to be rendered on the server.

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