I'm facing an issue in my React app where I have two language versions, English and Urdu, and I want to apply different CSS styles and content alignments based on the selected language.
For the English version, I want the content to be displayed on the left side of the page, and for the Urdu version, the content should be displayed on the right side of the page. I have separate CSS files for both languages (e.g., EnglishVersion.css and UrduVersion.css) to handle the styling.
However, the problem is that when I switch from Urdu to English, the CSS styles of the Urdu version are not being removed completely, and some elements are still displayed on the right side instead of the left side as intended for the English version. It's like the CSS of the Urdu version is still partially applied even after switching to English.
I have attempted to use the useEffect hook to dynamically update the content alignment based on the selected language, but it doesn't seem to work as expected.
I want to ensure that when I switch between languages, the CSS styles and content alignment are applied correctly without any interference from the previous language's styles.
If anyone has encountered a similar issue or has a solution to handle language-specific CSS styles and content alignment in a React app, I would greatly appreciate your guidance. Thank you for your help!