在Next.js多语言应用程序中动态切换用于RTL的CSS

7uzetpgm  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(142)

我目前正在使用Next.js开发一个多语言应用程序,当切换到阿拉伯语时,我面临着动态导入RTL(从右到左)CSS文件的问题。我的目标是让应用程序根据所选语言在RTL和LTR(从左到右)布局之间切换。
1.我试图将import语句放在组件中并使用延迟加载,但Next.js抛出了一个错误,指出我只能在_app组件中导入CSS。Global Css cannot be imported from files other than your custom
1.我还尝试从CSS文件中导入一个变量,并使用它来有条件地应用样式,但应用程序似乎完全忽略了这个条件(无论如何,rtl样式都将应用)。Importing the styles from css file图像:2 applying the styles conditionally
1.此外,我尝试使用条件渲染方法,如{lang === "ar" && <link rel="stylesheet" href="style.css" />},但无论我尝试什么,Next.js都无法找到CSS文件。applying the link tag conditionally
1.我尝试在条件语句中导入它:当我切换到阿拉伯语时,它可以工作,但就像那样,我不能切换回其他语言(忽略弯弯曲曲的线importing styles in a condition
1.我甚至尝试把所有的类放在一个JavaScript变量中,然后在样式标签中使用它们。但由于某些原因,一些样式可以正确应用,而另一些则会出错storing css classes in a js string
我非常感谢社区提供的任何见解或替代解决方案,以便根据我在Next.js应用程序中选择的语言在RTL和LTR布局之间动态切换CSS。

mefy6pfw

mefy6pfw1#

我认为你需要检查Next.js国际化(i18n)
NextJs文档链接:https://nextjs.org/docs/app/building-your-application/routing/internationalization
下面是NextJs的i18n:https://next-intl-docs.vercel.app/docs/getting-started
如果只是为了RTL行为,您可以查看“Ahmed Shadeed”的指南,他专门从事RTL
RTL指南:https://rtlstyling.com/https://rtlstyling.com/posts/rtl-styling

相关问题