how to set a css class to all the components of an application-CodePudding

i am implementing a multilingual react application and i need a way to apply some css code to most of the components based on the selected language. something similar to direction-rtl and direction-ltr which applies to all the components when applied to the body component. i want to set a class like lang-en to all the components and then in the css file of the components set some css codes for the times that they have the lang-en class for instance i want to set the background of all the .rec to be red when lang-en is applied

.rec.lang-en{
background-color: red;
}

CodePudding user response：

You can create component that is parent of all your class and on that component check language and set style for your language like below


ReactDOM.render(
         <DetectLanguageLayout>
             <ChildClass/>
         </DetectLanguageLayout>,
    document.getElementById('root')
);

And DetectLanguageLayout is like below

  <div className={`your-style ${lang=="en"?"bg-white":"bg-red"}`}>
        <div>{props.children}</div>
  </div>